WordPressショートコードとサンプルスニペットの使用を開始する

公開: 2021-02-18

WordPressのショートコードは2.5で導入され、コンテンツ内で使用するマクロコードを作成するのに役立ちます。あなたがそれについて考えるならば、これはあなたの投稿に動的な広告スポットや行動を起こすボタンのようなものを作成するための素晴らしい方法です。

召喚状の例を使用する場合は、ブログ投稿にこのようなものを追加してボタンを表示し、テンプレートのfunctions.phpファイルの出力を編集できます。これについてはすぐに説明します。

 [button]

ボタンをカスタマイズするには、次のようなものを追加するだけです。

 [button type="twitter"]

または、さらに改善するために、囲んでいるショートコードを使用できます。

 [button type="twitter"]Follow me on Twitter![/button]

想像力を働かせれば、ショートコードの可能性とそれを使って何ができるかがすぐにわかります。この記事では、これら3種類のショートコードを作成して使用する方法を紹介し、次に、自分のWordPressサイトで使用できるすぐに使用できるショートコードをいくつか紹介します。

自己閉鎖型ショートコードの作成

最も単純なショートコードは自己閉鎖型です。 Twitterアカウントへの簡単なリンクを作成し、それをブログ投稿に追加します。

すべてのコードは、 /wp-content/themes/your-theme/にあるfunctions.phpにあります。お持ちでない場合は、作成してコードを入れてください。

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

使用法：

 [button]

add_shortcode()関数を使用するだけで、任意のPHP関数をショートコードにリンクできます。この簡単な例では、Twitterアカウントへのリンクを返すだけですが、これをさらに一歩進めて、いくつかのパラメーターを追加しましょう。

パラメータを使用して自己終了ショートコードを作成する

ショートコードはパラメータをサポートしており、出力をカスタマイズできます。この例では、2つの異なるボタンがあるため、表示するボタンを定義する必要があります。

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

これで、ショートコードでtypeを定義することにより、表示するボタンを選択できます。

 [button type="twitter"] [button type="rss"]

これは素晴らしい。しかし、テキストを変更したい場合はどうでしょうか。 [button type="twitter-2"]などのショートコードタイプを追加し続けることもできますが、それはあまり動的ではありませんね。これを正しい方法で行う方法を見てみましょう。

囲んでいるショートコードを作成する

囲んでいるショートコードを使用すると、BBCodeを使用したことがある場合と同じように、ショートコード内にコンテンツを埋め込むことができます。

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

このショートコードを使用するには、次のように使用するテキストを埋め込みます。

 [button]Follow me on Twitter![/button]

このボタンをさらに改善するために、前の例で行ったようにパラメーターを追加できます。今回は、Twitterのユーザー名用とボタンスタイル用の2つのパラメーターを追加しましょう。次に、さまざまな種類のボタンを使用して、ボタンをリンクするTwitterアカウントを選択できます。

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

使用法：

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: &lt;a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!&lt;/a>

これで、任意のTwitterアカウントにリンクできるカスタマイズ可能なボタンができました。ご理解いただけると思いますが、これよりもはるかに高度なショートコードを作成できますが、これは良いスタートです。

ウィジェットとテンプレートファイルのショートコード

ショートコードの威力を見たとき、なぜウィジェットやテンプレートファイルでショートコードを使用できないのか疑問に思われるかもしれません。まあ、それはあなたができることがわかります。

ウィジェットでショートコードをアクティブ化するには、functions.phpに次のコードを配置するだけです。

 add_filter('widget_text', 'do_shortcode')

また、テンプレートファイルでショートコードを使用するには、次の方法でショートコードにアクセスできます。

 do_shortcode("[button]");

すぐに使用できるshortode

すぐに実装できるクールなショートコードをいくつか紹介します。

投稿のコード

プログラミングに焦点を当てたブログを運営している場合は、おそらく投稿にコードを表示したいと思うでしょう。

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

使用法：

 [code]&lt;?php echo 'Hello World!'; ?>

投稿のどこにでもAdSenseを埋め込む

このショートコードを使用すると、 [adsense]を使用するだけで、投稿のどこにでもGoogle広告を追加できます。

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

YouTubeビデオを埋め込む

このショートコードを使用すると、ブログの投稿にYouTube動画を埋め込むことができます。

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

使用法：

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

Paypal寄付ショートコード

これは、Paypalアカウントへの寄付リンクを作成するのに役立つショートコードです。

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

使用法：

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

著者へのプライベートノート

この最後のものは賢いです。このショートコードを使用すると、投稿者だけが見ることができるメモを投稿に作成できます。

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

結論

この記事を読んだ後、私と同じようにWordPressのショートコードを気に入っていただければ幸いです。また、自分のブログでそれらの実装を開始していただければ幸いです。