WordPress 创建简码-建立自定义短码显示文字及图片

WordPress shortcode 在网页设计时是非常弹性的功能，当需要在特定位置加入想要呈现的内容，却受限于网站主题框架无法以内建编辑器或区块小工具完成时，就可以选择自行创建shortcode 函式定义想要显示的内容，只要在HTML 区块中加入shortcode ，就能够在网站主题不支援编辑的位置显示特定文字或图片，本篇文章分享的shortcode 函式相当简单，只需按照步骤就能够完成

使用add_shortcode 函数

第一步：在下方的函式中，dh_first_shortcode 是可以自定义的名称，但要注意如果有更改，函式结尾处的add_shortcode 内容也必须要替换成一样的名称。而这段函式所代表的意义就是定义当dh_first_shortcode 这段文字以代码的形式在HTML 中出现时，将自动输出（echo）文字” shortcode教学” 以及档案位置为' http://demo7.design-hu.tw/wp-content/uploads/鹄仑设计－favicon.png ' 的图片，也就是在网页上显示

//这就是简码的内容
function dh_first_shortcode(){
  //在這裡放任何圖文
  echo 'shortcode教学';
  echo '<img src="http://demo7.design-hu.tw/wp-content/uploads/hao－favicon.png">';
  
}
add_shortcode('dh_first_shortcode','dh_first_shortcode');

加入方式为选择子主题模板，在funtions.php 档案内容结尾处加入此段函式即可，如下图所示。

第二步：以WordPress 传统编辑器而言，只需加入刚刚定义的shortcode 名称，并在前后加上[ ] 符号即可。

第三步：完成后就会在网页上显示我们所定义的文字与图片，如下图所示。

第四步：在本来的函式中，我们只单纯输出文字，因此在外观上不会套用网站主题既有的CSS 样式表，此时只需要为文字加入HTML 标签以及CSS 类名称，以下图为例，设定文字为h2 就会套用网站中对h2 既有的样式，比如字体粗细与大小。

第五步：更新后在重新整理网页，文字就会套用h2 标签的样式了。

结语：

shortcode 写法可以有很多种，另外一种比较复杂的甚至可以在代码中直接加入筛选条件，比如说文章loop 可以使用shortcode_atts 来制定规则，以控制网站前端只显示特定的分类文章，shortcode 看起来就会像[dcat cat=”cat_id”]，只要输入文章分类id ，就能只显示特定分类的文章，这是属于比较进阶的写法，之后鹄学苑也会陆续分享喔！

今天的教学到这里告一段落了，不要忘记在右侧订阅鹄学苑电子报，确保收到最新WordPress 教学文章