WordPressの投稿や固定ページで使えるショートコードの作り方!

カスタマイズ

今日はブログコンセプトの元祖に戻り、WordPressカスタマイズコーナー!

大阪は灼熱の暑さなのに何故か風邪を引いてしまい、喉と耳が激しく痛いY氏です。

僕の事務所には置き薬があるんだけど、あってよかった置き薬!的な場面が幾度となくあるので、事務所や家に置き薬をセッティングするのを皆さんにもお勧めする。

ちなみに僕が利用しているのは富士薬品の置き薬。急な頭痛や歯痛。女性の方なら生理痛。そんな時にわざわざ薬局まで行かなくても置き薬さえあれば万事解決!

是非ご検討頂きたい。

それでは本題へ!

WordPressでショートコードを自作してみよう!

WordPressでブログやサイトを運営していると、投稿ページや固定ページにphpを書きたい時が結構ある。

固定ページの場合はテーマファイルを作成して、作成したファイルを固定ページ投稿画面のテンプレートで選択すれば問題なく解決するが、投稿ページで毎回毎回それは面倒くさい。

そう、面倒くさい。

投稿ページにphpを直接書き込めるプラグインもあるけど、セキュリティ面でかなり心配。だから、それは避けたい。避けて欲しい。

では、どうすれば投稿ページにphpを書くことができるのか!?

それが今回ご紹介するショートコードを利用する方法!コピペで行けるので是非トライしてみてほしい!

今回のパターンはFTPを利用する。なので、中級者〜向けかな?

一例をまとめると

本文中にアドセンスを表示したい!

このブログでも記事中アドセンスの実装方法を説明した記事があるけど、本文中の任意の場所にアドセンスを表示したい場合などにもショートコードは使える。

ワードプレス記事中にアドセンスなどの広告挿入で収益アップ!もちろんコピペでOK

本文中に関連記事を表示したい!

これもよくあるパターンで、本文中に関連記事を表示させたい場合、毎回毎回htmlで書くのは面倒くさい。そこで活躍するのがショートコード。

例えば記事下の関連記事一覧などのコンテンツは、single.phpなどに記載をすれば問題ないが、記事本文中に関連記事を出したい場合などはショートコードを利用するやり方がベスト。

後程参考例をご紹介する。

ショートコード作成の前に一言

今回はショートコードで呼び出したいファイルを個々で作成して、FTPでアップするやり方。

他にもfuntion.phpだけに書き込むだけの方法などもある。

ただしこの場合の欠点は、functionにアドセンスのコードは書き込めるが、関連記事を呼び出したり、PCやスマホの条件分岐をしようと思ったら少々カスタマイズがややこしくなる。

何故かと言うとfunction.phpには

<?php if(wp_is_mobile()) { ?>

よく見かけるこういった形のコードを直接書くことができないから。

いや書くことはできるんだけど、一応こんな書き方になってしまう(僕が制作した他サイトから引用)

//*=============================================*
//*指定した著者名の記事一覧を表示
function getCatItems($atts, $content = null) {
extract(shortcode_atts(array(
        'num' => '',
        'author' => ''
    ), $atts));
    global $post;
    $user = get_user_by( 'login',$author );
    if(empty($user->ID)){
        exit(0);
    }
    $oldpost = $post;
    $myposts = get_posts('author='.$user->ID.'&orderby=date&post_type=timenews&numberposts=2');
    $retHtml='';
    foreach($myposts as $post) :
        setup_postdata($post);  
         $retHtml.=''.get_post_time('m月d日H:i').'
'.get_field('投稿本文').'
'; endforeach; $retHtml.=''; $post = $oldpost; return $retHtml; } add_shortcode('kiji-list-Id', 'getCatItems');

いやでしょ?(笑)

アドセンスのみならショートコードよりもh2タグの前に設置するやり方をオススメするので、わざわざショートコードは必要ないと思う。

ではショートコード作成

1 function.php

ショートコードはphpで書いたコードなどを呼び出して、投稿ページや固定ページに表示することができる機能。

有料のWordPressテーマを利用中の人なら、テンプレートに備わっているデフォルトのショートコードを実際に利用したり、目にしたことがあるはず。

今回のカスタマイズは複数のショートコードを作成できる簡単な方法をチョイスした!

では早速!

function.phpに以下を記入しよう!

function my_php_Include($params = array()) {
	extract(shortcode_atts(array('file' => 'default'), $params));
	ob_start();
	 include(get_theme_root() . '/' . get_template() . "/mycode/$file.php");
	return ob_get_clean();
}
add_shortcode('mycode', 'my_php_Include');

これをそのままfunction.phpにコピペ!

上記に二箇所あるmycodeの部分は任意の名前でオッケー!

※ いつも通りバックアップ、子テーマなどを使用して自己責任で(_ _)

これでショートコードを呼び出すための準備は完了!

あとは実際にショートコードを使って表示させたい内容のファイルを自作する。

ショートコードファイルの作成

ここからはFTPを使用する。

まず、FTPから自分のサイトに接続をして、

wp-content

themes

使用中のテンプレートフォルダ

その中にmycodeフォルダを作成

階層で言えばテンプレートのテーマファイル(style.cssとかsingle.php)が入っている階層と一緒。

フォルダを作成し終えたら、後は自分の利用したいコードを書いたファイルをこのフォルダにぶち込んでいく。

実際に作成するショートコードファイルの例

記事中アドセンス編

記事中の任意の場所にアドセンスを配置したい場合、

<?php if(wp_is_mobile()) { ?>

SP用アドセンスコード

<?php } else { ?>

PC用アドセンスコード

<?php } >

レスポンシブなどでPC&SP共通のアドセンスコードを使用している場合は上記の条件分岐は必要ない。

ただPCからのクリック、SPからのクリックのデーターを集計したいなどの場合は分岐して別々のコードを使用することをお勧めする。

あとは、投稿ページでアドセンスを表示したい場所に、

[mycode file='任意の名前']

任意の名前の部分の部分は、アドセンス用のファイルを作った時につけたファイル名を書けばオッケー!

例えば adsens.php

みたいな感じ。

あっ! .phpは書かなくても大丈夫なので、

[mycode file='adsens']

こんな感じ。

記事中関連記事編

記事中の任意の場所や、h2タグの手前にアドセンスを表示するパターンもあれば、関連記事などを1〜2個表示させて離脱防止やPVアップに活用する方法もある。

毎回本文中に手書きでhtmlを書くのは合理的ではない。

そこは自動で表示させたい所。

<?php
//カテゴリ情報から関連記事を2個ランダムに呼び出す
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
  array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
    'post__not_in' => array($post -> ID),
    'posts_per_page' => 2,
    'orderby' => 'rand',
    'category__in' => $category_ID,
);
$query = new WP_Query($args); ?>
 <?php if( $query -> have_posts() ): ?>

	         <?php while ($query -> have_posts()) : $query -> the_post(); ?>


<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 80, "…", "UTF-8"); ?></a>


 <?php endwhile;?>
	
  <?php
endif;
wp_reset_postdata();
?>

この例だと、同じカテゴリに属した記事をランダムに2個表示させることができ、尚且つ今見ている記事は表示させないようにしている。

cssでの装飾はしてないコードなので、任意で表示をカスタムして下さい(_ _)

[mycode file='任意の名前']

上記を任意の場所にセットすれば関連記事が表示される。

広告などのバナー編

広告主などがいたり、アフィリエイトのバナーなどをサイト内の複数の場所に設置している場合、このショートコードを利用して一元管理することができる。

バナー用のphpファイルを作成し、mycodeフォルダに入れればオッケー!

あとはバナーの変更に応じてそのファイルの中にある広告コードやバナーなどの画像タグを書き換えれば、このショートコードを設置した場所の広告が一度に入れ替わる。

これも便利な使い方。

複数の広告をランダムで表示させたい場合は以下のプラグインを使用すれば楽ちん。

このプラグインで作成したショートコード(php版)を自作のショートコードファイルにぶち込めばオッケー。

ワードプレスで広告をランダム表示できる「ads by datafeedr.com」プラグイン

まとめ

単にブログを運営しているだけなら必要ないかもしれないが、カスタマイズやサイトを制作している人であれば何かと需要のあるカスタマイズだと思う。

WordPressはプラグインの存在でかなり便利なCMSではあるが、なんでもかんでもプラグインを使用するのはお勧めしない。

プラグインを利用する前に、ネット検索などを利用して他の方法がないか?を探してほしい。

(via bridge

CHECK管理人サイト YUICHI FUKUDA.COM