記事投稿に便利なWordPressショートコードのご紹介と作り方

記事投稿に便利なWordPressショートコードまとめ

WordPressショートコードをみなさん使ってますか?
これを利用すると、記事投稿の際にとてもラクに作成することができるんです。

今回は、記事投稿時に便利なWordPressショートコードについてご紹介します。

WordPressショートコードの使用方法と設定方法

WordPressショートコードは、『functions.php』に設定用のタグを追加し、投稿本文内にショートコード専用のタグを記述して表示させていきます。

とはいっても、WordPressショートコードがどんなにラクになるか分からないと魅力を感じられないと思いますので、まずは使用方法についてをご紹介します。

WordPressショートコードの使用方法について

WordPress無料テーマのfirstupには、Youtube動画とGoogleマップを簡単に記事に貼りつけるためのWordPressショートコードをご用意しているので、試しにfirstupに設定してあるものを例にして、WordPressショートコードの使用方法についてご紹介します。

Youtube動画を表示してみますね。

Youtube – 恋するフォーチュンクッキー/AKB48(Cover)

上記のYoutube動画は、以下のWordPressショートコードを記事本文内に記述して表示させております。

このショートコードは、Youtubeの該当の動画ページURLの一部分を入力すれば、その動画を表示させることができるWordPressショートコードです。

先ほどの動画ページURLは、
http://www.youtube.com/watch?v=Q54jE2K_OQ0
です。

黄色い部分をコピーし、ショートコード内にペーストすれば動画が表示されるのです。

とても短いコードを利用して簡単に表示させられますね。

WordPressショートコードの設定方法について

先ほどのWordPressショートコードを設定するために、functions.phpに以下のものを記述してあります。

  1. // youtube
  2. function fc_youtube($atts, $content = null) {
  3. extract(shortcode_atts(array(
  4. "width" => '630',
  5. "height" => '354',
  6. "src" => ''
  7. ), $atts));
  8. return '<div class="post_iframe"><iframe width="'.$width.'" height="'.$height.'" frameborder="0" src="//www.youtube.com/embed/'.$src.'" allowfullscreen></iframe></div>';
  9. }
  10. add_shortcode("youtube", "fc_youtube");

黄色い部分は、動画ページで提供しているYoutube動画を貼り付けるための埋め込みコードです。

この黄色い部分の中には『'.$width.'』『'.$height.'』『'.$src.'』という記述があります。
これは、その部分の上の行に記述されている『"width" => '630'』『"height" => '354'』『"src" => ''』の値を取得しているのです。

ただ、『"src" => ''』は、その動画によって変わるので、ここでは値を入力せず、ショートコード内で値を入力する。

というのが、先ほどの設定です。

これで、WordPressショートコードについて、なんとなく概要をつかめましたかね?

記事投稿に便利なWordPressショートコード一覧

概要がなんとなく理解したところで、色々なWordPressショートコードをご紹介します。お好みのものをあなたのブログの『functions.php』に追加し、記事投稿時に使用してみてください。

※functions.phpを編集すると、表示が崩れたり、何も表示されなくなる場合があります。あらかじめバックアップをとってから編集することをおすすめします。

Googleマップを表示させる

functions.phpに以下を追加。

  1. // Google Map
  2. function fc_googleMaps($atts, $content = null) {
  3. extract(shortcode_atts(array(
  4. "width" => '630',
  5. "height" => '354',
  6. "src" => ''
  7. ), $atts));
  8. return '<div class="post_iframe"><iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed"></iframe></div>';
  9. }
  10. add_shortcode("googlemap", "fc_googleMaps");

記事内に記述するWordPressショートコード

参考記事:[WordPress] ショートコードでGoogleマップを表示させる – かちびと.net

記事内にURLだけでスクリーンショットを表示する

他のブログを紹介する際にブログのスクリーンショット画像を表示させたりするかと思います。この際に画像を用意するのではなく、URLだけで表示させてしまおうというのが、このショートコードです。

スクリーンショットを撮影して、画像サイズを変更して、画像を圧縮して、作成した画像をアップロードして、記事内に貼り付けて…。

その工程が、ショートコードとURLの記述だけでできるので、かなり手間が省けますね。

以下をfunctions.phpに追加。

  1. // WordPress APIでスクリーンショットを表示するショートコード
  2. function get_wp_screenshot($attr) {
  3. extract(shortcode_atts(array(
  4. // デフォルト設定
  5. 'url' => '',
  6. 'alt' => '',
  7. 'class' => 'wpshot', // imgタグに付加するclass名
  8. 'width' => 0, // 画像の幅(0の場合はwidthタグを出力しない)
  9. 'link' => 1 // 0:リンクしない 1:リンクする
  10. ), $attr));
  11. if ($url == '') {
  12. return;
  13. }
  14. $image = 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url));
  15. if ($width > 0) {
  16. $height = floor($width/16*9);
  17. $image .= '?w=' . $width;
  18. $image_wh = ' width="' . $width . '" height="' . $height . '"';
  19. }
  20. if ($class != '') {
  21. $image_wh .= ' class="' . $class . '"';
  22. }
  23. $image = '<img src="' . $image . '" alt="' . $alt . '"' . $image_wh . '>';
  24. if ($link == 1) {
  25. $image = '<a href="' . $url . '" target="_blank">' . $image . '</a>';
  26. }
  27. return $image;
  28. }
  29. add_shortcode('wpshot','get_wp_screenshot');

記事内に記述するWordPressショートコード

  1. [wpshot url="スクリーンショットを撮るURL" width="" alt="説明"]

WordPressテーマfirstupでは、『width』を設定しないでCSSにこのようなコードを記述すると、デザイン的にいいかも。

  1. img.wpshot{
  2. display: block;
  3. margin: 0 0 1.61em;
  4. width: 100%;
  5. height: auto;
  6. }

参考記事:[WordPress] URLを指定してサイトのスクリーンショットを表示するショートコード(WordPress.comのAPIを使用) | memobits
※こちらの記事では、画像の比率を4:3にしておりますが、当記事内でご紹介したものは16:9にしてあります。16行目で変更できますのでお好みでどうぞ。
※その他、設定方法のご紹介もされております。ぜひ上記記事も参照ください。

RSSフィード内にだけコンテンツを表示させる

このショートコードを利用すると、RSSフィード内だけに表示される文章を記述することができます。

たとえば、関連した記事をRSSフィード内に表示させたり、TwitterやFacebookページなどのリンクを追加したり。使い方は色々ありますね。あなたがアピールしたいことをRSSフィードでお知らせする際に使用してみてください。

以下をfunctions.phpに追加。

  1. <?php
  2. function feedonly_shortcode( $atts, $content = null) {
  3. if (!is_feed()) return "";
  4. return $content;
  5. }
  6. add_shortcode('feedonly', 'feedonly_shortcode');
  7. ?>

記事内に記述するWordPressショートコード

  1. [feedonly]この中に記述した内容はRSSフィード内のみに表示される[/feedonly]

参考記事:RSSフィードにだけコンテンツを表示

関連記事をリンク付きで、さまざまなスタイルで表示させる

コンテンツの流れから、記事の途中であっても関連記事を表示させたい時ってありますよね。

自分のブログから記事タイトルをコピーしてきて、リンクをコピーしてきて…、という作業を何回も繰り返えさなければいけないので、手間がかかるものなのです。

その手間を省くのが、このショートコード。

このショートコードは単に記事をリンク付きで表示させる、というのではなく、

  • 記事IDから1記事、もしくは複数記事を5記事表示させる。
  • カテゴリIDから1カテゴリ、もしくは複数カテゴリの記事を5記事表示させる。
  • タグスラッグから1タグ、もしくは複数タグの記事を5記事表示させる。
  • 著者IDから1ユーザー、もしくは複数ユーザーの記事を5記事表示させる。
  • 日付から該当の日付の記事を表示させる。(月単位も可。5記事)

と、ショートコードの記述だけで表示させることができます。

また、表示させる記事数を変更したり、特定の記事を表示させなくしたりなど、オプションがたくさんあるのもいいですね。

以下をfunctions.phpに追加。

  1. function articleFunc($atts) {
  2. extract(shortcode_atts(array(
  3. 'mode' => null,'type' => null,'id' => null,
  4. 'y' => null,'m' => null,'d' => null,
  5. 'numberposts' => 5,'offset' => null,'order' => 'DESC','orderby' => 'post_date','meta_key' => null,
  6. 'include' => null,'exclude' => null,
  7. 'head' => null,'tail' => null,
  8. ),$atts));
  9. if($mode != null) $mode = '&'.$mode.'='.$id;
  10. $post = get_posts('post_status=publish&numberposts='.$numberposts.'&offset='.$offset.'&order='.$order.'&orderby='.$orderby.'&include='.$include.'&year='.$y.'&monthnum='.$m.'&day='.$d.'&exclude='.get_the_ID().','.$exclude.'&meta_key='.$meta_key.$mode);
  11. foreach ($post as $item){
  12. $im = wp_get_attachment_image_src(get_post_thumbnail_id($item->ID),'none',true);
  13. $date = date('Y.m.d',strtotime(get_post($item->ID)->post_date));
  14. $update = date('Y.m.d',strtotime(get_post($item->ID)->post_modified));
  15. $echo .= $type=='custom' ? '<a href="'.get_permalink($item->ID).'">'.$item->post_title.'</a>'
  16. : $head.'<a href="'.get_permalink($item->ID).'">'.$item->post_title.'</a>'.$tail;
  17. }
  18. return $echo;
  19. }
  20. add_shortcode('article','articleFunc');

記事内に記述するWordPressショートコード

例)カテゴリIDが1と16の記事を10記事表示させます。

  1. [article mode="cat" id="1,16" numberposts="10"]

参考記事:「記事ID」から呼び出す
※さまざまなオプションがありますので、上記記事をよく参照してみてください。

自分のブログを使いやすくするためのWordPressショートコードを自作してみよう

ショートコードを利用し始めると、自分のブログで利用したいショートコードを独自に用意したくなるものです。

たとえば、

  • 記事の最後にいつも同じ文章を書いているから、定型文として登録しておいて表示させたい。
  • 「どうも、@wp_firstupです。」といった自己紹介をツイッターへのリンクを付けて、簡単に表示させたい。
  • 記事内の好きなところにGoogleアドセンスを表示させたい。

など。

自分なりに表示したいものってそれぞれあると思いますので、そういった時はぜひ自作してみてください。

以下をfunctions.phpに追加。

  1. function my_shortcode() {
  2. return "ここに表示させたい内容";
  3. }
  4. add_shortcode('ここに呼び出す際のコード', 'my_shortcode');

黄色い部分は、ショートコード毎に書き換えてください。また2カ所同じものを記述してください。

あと、『ここに表示させたい内容』には、表示させる内容を。
『ここに呼び出す際のコード』の部分は、記事内に記述し、呼び出すためのコードを記述してください。覚えやすいものがいいですね。

記事内に記述するWordPressショートコード

  1. [ここに呼び出す際のコード]

TwitterテキストリンクのWordPressショートコード作り方

自作例として、私のTwitterへのリンクが付いたテキストを表示させるショートコードをご紹介します。

functions.php

  1. function mytw() {
  2. return '<a href="https://twitter.com/wp_firstup" target="_blank">@wp_firstup</a>';
  3. }
  4. add_shortcode('tw', 'mytw');

記事内に記述するWordPressショートコード

  1. どうも、[tw]です。
表示例: どうも、@wp_firstupです。

このような感じで簡単に設定できますので、ぜひ試してみてください。

まとめとして

ブログは更新していくもの。
できれば手間はかけたくないですよね。

WordPressショートコードは、そのブログ更新を簡略化させるために活用したい方法なのです。

あなたのブログでも試してみてください。

photo credit: Tetsumo via photopin cc

記事投稿に便利なWordPressショートコードのご紹介と作り方 by

コメントを残す