精通WordPress简码

在 WordPress 2.5 中引入的短代码功能强大,但仍然是相当不为人知的 WordPress 功能。想象一下,您可以只输入“adsense”来显示 AdSense 广告,或者输入“post_count”来立即找出您博客上的帖子数量。

WordPress 短代码可以做到这一点,而且肯定会让您的博客生活更轻松。在本文中,我们将向您展示如何创建和使用短代码,以及提供杀手级的即用型 WordPress 短代码,以增强您的博客体验。

什么是简码? #

sm1

使用简码非常简单。要使用一个,请创建一个新帖子(或编辑现有帖子),将编辑器切换到 HTML 模式并在括号中键入一个简码,例如:

[showcase]

也可以使用带有简码的属性。带有属性的简码看起来像这样:

[showcase id="5"]

短代码还可以嵌入内容,如下所示:

[url href="https://www.smashingmagazine.com"]Smashing Magazine[/url]

简码由 WordPress 2.5 中引入的一组称为简码 API 的函数处理。保存帖子时,会解析其内容,短代码 API 会自动转换短代码以执行它们要执行的功能。

创建一个简单的简码 #

短代码要记住的一点是它们很容易创建。如果您知道如何编写基本的 PHP 函数,那么您已经知道如何创建 WordPress 短代码。对于我们的第一个消息,让我们创建著名的“Hello, World”消息。

  1. 打开主题中的functions.php文件。如果该文件不存在,请创建它。
  2. 首先,我们必须创建一个函数来返回“Hello World”字符串。将其粘贴到您的functions.php文件中:
    function hello() {
        return 'Hello, World!';
    }
    
  3. 现在我们有了一个函数,我们必须把它变成一个简码。多亏了这个add_shortcode()功能,这很容易做到。将这一行粘贴到我们的hello()函数之后,然后保存并关闭functions.php文件:
    add_shortcode('hw', 'hello');
    

    第一个参数是短代码名称,第二个是要调用的函数。

  4. 现在短代码已创建,我们可以在博客文章和页面上使用它。要使用它,只需将编辑器切换到 HTML 模式并键入以下内容:
    [hw]

    你完成了!当然,这是一个非常基本的短代码,但它是一个很好的例子,说明创建一个短代码是多么容易。

     

创建高级简码 #

如前所述,短代码可以与属性一起使用,这非常有用,例如,用于将参数传递给函数。在此示例中,我们将向您展示如何创建短代码来显示 URL,就像您在 VBulletin 和 PHPBB 等论坛上使用的 BBCode 一样。

  1. 打开您的functions.php文件。在其中粘贴以下函数:
    function myUrl($atts, $content = null) {
      extract(shortcode_atts(array(
        "href" => 'https://'
      ), $atts));
      return '<a href="'.$href.'">'.$content.'</a>';
    }
    
  2. 让我们把这个函数变成一个简码:
    add_shortcode("url", "myUrl");
    
  3. 现在已创建短代码。您可以在您的帖子和页面上使用它:
    [url href="https://www.wprecipes.com"]WordPress recipes[/url]
    

    当您保存帖子时,短代码将显示一个标题为“WordPress 食谱”并指向https://www.wprecipes.com 的链接。

代码解释。为了正常工作,我们的简码函数必须处理两个参数:$atts$content$atts是简码属性。在此示例中,该属性被调用href并包含指向 URL 的链接。$content是短代码的内容,嵌入在域和子目录之间(即“www.example.com”和“/subdirectory”之间)。从代码中可以看出,我们已经为$content and $atts.

现在我们知道如何创建和使用短代码,让我们看看一些杀手级的现成短代码!

1. 创建一个“发送到 Twitter”简码 #

sm4

问题。看来你们中的很多人都喜欢我的“发送到 Twitter”技巧。我也非常喜欢这个 hack,但它有一个缺点:如果您将代码粘贴到您的single.php文件,“发送到 Twitter”链接将在每个帖子上可见,您可能不希望这样。最好控制此 hack 并能够指定何时将其添加到帖子中。解决方案很简单:简码!

解决方案。这个短代码很容易创建。基本上,我们只是从“发送到 Twitter”黑客中获取代码并将其转换为 PHP 函数。将以下代码粘贴到主题中的functions.php文件中:

function twitt() {
  return '<div id="twitit"><a href="https://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
}

add_shortcode('twitter', 'twitt');

要使用此短代码,只需将编辑器切换到 HTML 模式,然后键入:

[twitter]

并且“发送到 Twitter”链接将出现在您放置短代码的位置。

  • 如何:创建“将此发送到 Twitter”按钮
  • 推特工具

2. 创建一个“订阅 RSS”简码 #

sm5

问题。您已经知道,获得 RSS 订阅者的一个非常好的方法是显示一个漂亮的框,上面写着类似“订阅 RSS 提要”的内容。但是再一次,我们真的不想将某些东西硬编码到我们的主题中并且失去对它出现方式的控制。在这个 hack 中,我们将创建一个“订阅 RSS”简码。在某些地方而不是其他地方显示它,在帖子或页面上,在主要内容的上方或下方,这一切都取决于您。

解决方案。像往常一样,我们创建一个函数,然后将其转换为简码。此代码进入您的functions.php文件。不要忘记将示例提要 URL 替换为您自己的 URL!

function subscribeRss() {
    return '<div class="rss-box"><a href="https://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';
}

add_shortcode('subscribe', 'subscribeRss');

造型框。您可能注意到了rss-box添加到包含链接的 div 元素的类。这使您可以按照自己喜欢的方式设置框的样式。下面是一些可以应用于“订阅 RSS”框的 CSS 样式的示例。只需将其粘贴到主题中的style.css文件中:

.rss-box{
  background:#F2F8F2;
  border:2px #D5E9D5 solid;
  font-weight:bold;
  padding:10px;
}

3. 随处插入 Google AdSense  #

sm3

问题。大多数博主使用 Google AdSense。将 AdSense 代码包含在sidebar.php等主题文件中非常容易。但成功的在线营销人员知道,人们会更多地点击嵌入内容本身的广告。

解决方案。要在您的帖子或页面的任何位置嵌入 AdSense,请创建一个短代码:

  1. 打开主题中的functions.php文件并粘贴以下代码。不要忘记使用您自己的 AdSense 代码修改 JavaScript 代码!
    function showads() {
        return '<div id="adsense"><script type="text/javascript"><!--
      google_ad_client = "pub-XXXXXXXXXXXXXX";
      google_ad_slot = "4668915978";
      google_ad_width = 468;
      google_ad_height = 60;
      //-->
    </script>
    
    <script type="text/javascript"
    src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></div>';
    }
    
    add_shortcode('adsense', 'showads');
    
  2. 保存functions.php后,您可以使用以下短代码在您的帖子和页面上的任何位置显示 AdSense:
    [adsense]
    

    请注意,我们的 AdSense 代码被包裹在一个adsensediv 元素中,我们可以在style.css文件中按照我们想要的方式设置它的样式。

代码解释。以上代码仅用于显示 AdSense 广告。当在帖子中插入短代码时,它会返回一个 AdSense 广告。这非常简单,而且您会同意,这真的可以节省时间!

资料来源:  #

  • 如何:在帖子的任何位置嵌入 AdSense

4. 嵌入 RSS 阅读器 #

sm6

问题。许多读者似乎也喜欢最近在 Smashing Magazine 上发表的“ 8 个 WordPress RSS Hacks for WordPress ”帖子。现在,让我们利用我们对 RSS 和短代码的了解,将 RSS 阅读器嵌入到我们的帖子和页面中。

解决方案。像往常一样,要应用此 hack,只需将以下代码粘贴到主题的function.php文件中。

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
  "feed" => 'https://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

要使用简码,请输入:

[rss feed="https://feeds.feedburner.com/wprecipes" num="5"]

feed属性是要嵌入的提要 URL,num是要显示的项目数。

5. 使用短代码从 WordPress 数据库获取帖子 #

问题。曾经希望您可以直接在 WordPress 编辑器中调用相关帖子列表吗?当然,“相关帖子”插件可以为您检索相关帖子,但使用短代码,您可以轻松获得特定类别中任意数量帖子的列表。

解决方案。像往常一样,将此代码粘贴到您的functions.php文件中。

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" =>), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

要使用它,只需在切换到 HTML 模式后将以下内容粘贴到 WordPress 编辑器中:

[liste num="3" cat="1"]

这将显示 ID 为 1 的类别中的三个帖子的列表。如果您不知道如何获取特定类别的 ID,这里介绍了一种简单的方法。

代码解释。在提取参数并创建全局变量 后$posts,该函数sc_liste()使用get_posts()带有 、 和 参数的函数numberpostsorder类别Y 中获取 X 个最新帖子。完成后,帖子将嵌入一个无序的 HTML 列表中并返回给您。orderbycategory

来源:  #

  1. WordPress:Création de shortcode avance

6. 获取帖子的最后一张图片 #

问题。在 WordPress 中,图像很容易操作。但为什么不让它变得更容易呢?让我们看一个更复杂的短代码,一个自动获取最新图像附加到帖子的短代码。

解决方案。打开functions.php文件并粘贴以下代码:

function sc_postimage($atts, $content = null) {
  extract(shortcode_atts(array(
    "size" => 'thumbnail',
    "float" => 'none'
  ), $atts));
  $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
  foreach( $images as $imageID => $imagePost )
  $fullimage = wp_get_attachment_image($imageID, $size, false);
  $imagedata = wp_get_attachment_image_src($imageID, $size, false);
  $width = ($imagedata[1]+2);
  $height = ($imagedata[2]+2);
  return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

要使用短代码,只需在编辑器中以 HTML 模式键入以下内容:

[postimage size="" float="left"]

代码解释。该sc_postimage()函数首先提取简码属性。然后,它使用get_children()wp_get_attachment_image()WordPresswp_get_attachment_image_src()函数检索图像。完成后,图像将返回并插入到帖子内容中。

资料来源:  #

  1. WordPress 短代码:轻松显示帖子附加的最后一张图片

7. 将简码添加到侧边栏小部件 #

sm8

问题。即使您喜欢这篇文章,您也可能会感到有点沮丧,因为默认情况下,WordPress 不允许将短代码插入侧边栏小部件。值得庆幸的是,这里有一个小技巧可以增强 WordPress 的功能并允许在侧边栏小部件中使用短代码。

解决方案。再粘贴一段代码到您的functions.php文件中:

add_filter('widget_text', 'do_shortcode');

这就是允许在侧边栏小部件中使用短代码所需的全部!

代码解释。我们在这里所做的非常简单:我们在widget_text()函数上添加了一个过滤器来执行do_shortcode()函数,它使用 API 来执行简码。因此,现在在侧边栏小部件中启用了简码。

原创文章,作者:网贝WebBay,如若转载,请注明出处:https://www.webbay.cn/wordpress-shortcodes

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

error: Content is protected !!