FavoriteLoading
0

WordPress Shortcode教学–网页设计基础,运用简码加入网页内容元素

WordPress Shortcode 教学– 网页设计基础,运用简码加入网页内容元素教学目的:

1.WordPress 外挂Shortcode 简介及运用方式

2.WordPress 架站如何运用Shortcode 建构网页元素操作说明

欢迎回到鹄学苑— WordPress 网页设计超详细攻略— WordPress Shortcode 教学– 网页设计基础,运用简码加入网页内容元素,在WordPress 网站架设的过程中,无论是使用WordPress 内建编辑器或者是主题、外挂所附​​加的网页建构器,对于网站内容元素所显示的位置及样式,可能会遇到无法按照所想去设定的时候,对于专业的网站设计师而言,可以轻易地透过写入程式码做解决,那对于一般非本科生的站长如果遇到类似状况,应该要怎么办?

因此本篇文章就是要介绍WordPress shortcode功能,可以很好协助解决这些类似的网站设计问题,Shortcode(短代码或简码)的来源是透过PHP语法去定义的一种网页元素表现形式

北京赛车冷热,不一样的PHP函数调用写法会有不同的表现形式,在[ ]全形括号中所显示的程式语言,能将其所代表的意义就是将网页内容元素显示在网站前台中。而这样的功能能让网站编辑与排版更加灵活多变,而非只受限于网站编辑器中所能操作的项目。

WordPress 有许多外挂都有提供Shortcode 的加入方式,而某些WordPress 布景主题也有特别提供加入Shortcode 的栏位来编辑单一网页内容,更有Shortcode 外挂能够直接在WordPress 内建编辑器中做网页元素的添加,在以下文章内容会一一向各位介绍,希望大家不要错过这个WordPress 实用的Shortcode 功能。

WordPress 外挂Shortcode 简介及运用方式

第一步:在联络表单外挂的设定页面中可以找到如下图标示处的Shortcode ,在某些WordPress外挂当作者在制作时会特别写入一段为这个外挂产生Shortcode的PHP语法,因此不是每一个外挂都具有Shortcode 。

WordPress shortcode 教学

第二步:在此简单示范在网站哪些位置可以运用Shortcode ,在WordPress外关中选择小工具,进入后在左边的侧边栏找到文字小工具,点选后将文字小工具新增到想要显示的侧边栏( sidebar )或页尾( footer )。

WordPress shortcode 教学

北京赛车冷热复制刚刚在联络表单中的代码,贴上到文字小工具中,要记得贴上时小标签要点选文字,不要点选预览。笔者是以left sidebar 左侧边栏来做示范。

WordPress shortcode 教学

可以在网站前台看到刚刚贴上的Shortcode 就会在网站指定位置显示Shortcode 所代表的联络表单区块。

WordPress shortcode 教学

第三步:那可以在页面或文章中加入Shortcode来显示外挂内容吗?做法相当简单,跟在小工具中加入Shortcode一样的方式,在网站后台开启文章或页面后,选择WordPress内建编辑器,同样小标签处选择文字,贴上Shortcode短代码,就会如图二中一样在网页中加入联络表单区块。

WordPress shortcode 教学
WordPress shortcode 教学

第四步:接者笔者会以AddThis这个社交分享外挂做示范,下图中可以看到在AddThis设定页面中有提供Shortcode加入分享按钮的方式。

WordPress shortcode 教学

第五步:每一个外挂的编写方式都不相同,而当在外挂的设定页面不到Shortcode ,不代表其没有提供Shortcode功能,最容易的查找方式可以透过  https://wordpress.org/plugins/这个WordPress官方外挂下载网站来查看外挂本身的详细资讯,像是AddThis在其下载页面FAQ就会提供外挂Shortcode的文字说明档案,让使用者了解AddThis外挂中Shortcode的编写规则。

WordPress shortcode 教学

点击上图的AddThis Shortcode 文字说明档案( documentation )后就会开启如下图的文件内容,红色方框标示的文字就是AddThis 在不同的功能下Shortcode 的编写方式,但要注意的是,AddThis 并不是每一种形式的分享按纽都能透过Shortcode 来自由编辑与定显示位置,像是AddThis 的侧边浮动按钮列,就只能显示在网页侧边,顶多设定在左侧或右侧显示,无法当成一般网页元素显示在网页内容中,因此就不具有加入Shortcode 的功能,其它的WordPress 外挂也是一样的道理,建议在使用外挂前可以先详阅外挂说明。

WordPress shortcode 教学

第六步:接下来笔者以AddThis外挂所提供的Shortcode来示范如何在在WordPress主题具有的功能中加入Shortcode 。

WordPress shortcode 教学

第七步:如果使用OceanWP作为网站建构的主题时,每一个文章、页面的编辑画面中都会有像下图的区块,具有放入Shortcode的栏位,并且能自定义网页元素区块想要显示的位置。

WordPress shortcode 教学

在选定的栏位中贴上Shortcode ,更新页面。

WordPress shortcode 教学

笔者是设定在页尾小工具( footer widgets )之前加入Share bottom,如下图所示。

WordPress shortcode 教学

• WordPress 架站如何运用Shortcode 建构网页元素操作说明

第一步:在开始使用Shortcode建立网站内容前,必须先透过后台外挂安装搜寻或本文开头提供的外挂下载连结来安装Shortcodes Ultimate这个WordPress外挂,安装方式可参考:WordPress教学基础介绍六(插件)。安装完成后在网站后台侧边栏找到Shortcode → Available shortcodes的选项,进入后就能看到下图画面,笔者以HEADING元素来做说明。

WordPress shortcode 教学

第二步:下图中标示Shortcode的栏位就是要加入HEADING时所要贴上的代码,如果对于CSS有一定的了解,就可以自行更改数值,如当然也可以透过Shortcode options的选项做数值变更。

WordPress shortcode 教学

第三步:进入到页面并使用WordPress内建编辑器开启,点选Insert Shortcode 。

WordPress shortcode 教学

第四步:进入后可以看到有相当多样性的网站元素可以选择,每一组网页元素都有相对应的Shortcode 。

WordPress shortcode 教学

第五步:笔者在编辑器中插入Heading与Tabs两个网页元素,在下图中可以看到Shortcode是以另一种样式表达,像是[su_heading size=”18″] Shortcode教学[/su_heading] ,其中 su_heading是元素属性名称,在一般网页编辑时不能随意更动(除非进入外挂编辑器中修改PHP),size=”18″是定义标题文字大小,这就是前面笔者提到的CSS语法部分,在Available Shortcode中可以预先定义,或者在插入元素时的设定选项中做操作,Shortcode教学 则是完全可以自定义的文字内容。

WordPress shortcode 教学

下图是笔者修改Shortcode 内容后的范例内容。

WordPress shortcode 教学

第七步:点选发表或更新后回到网站前台查看,刚刚设定的Shortcode已成功生效。

WordPress shortcode 教学

结语:

最后笔者针对今天的教学做几个重点归纳整理:

  1. Shortcode 是以PHP 函数式调用属性生成,其表达式必须要有相对应的PHP 语法才能更生效。
  2. Shortcode 的形式有两种,[test] 或者是 [su_heading size=”18″] Shortcode 教学[/su_heading] 。
  3. 不是每一个WordPrss 外挂与主题中都会自带Shortcode 加入方式,必须透过外挂下载的网页说明才能够真正确定。
  4. Shortcode 以HTML 属性容器做为显示载体会比较不容易出错,比如小工具的文字区块中选择文字标签贴上代码。
  5. 在 [su_heading size=”18″] Shortcode 教学[/su_heading] Shortcode 表达式中元素属性(su_heading)不能随意修改,只有CSS 数值(18)与自定义文字(Shortcode 教学)可以做变更。
尼尼博客,关注网上兼职赚钱和互联网创业。博客地址:www.cuffsman.com,扫描下面二维码添加微信:网上赚钱项目和经验分享,电子书、网赚视频,各种付费视频分享
网络兼职赚钱