固定・投稿ページに、.phpファイルをショートコードで呼び出す－wordpress

トップページを固定ページで新たに作成しようと思い、試行錯誤していましたが、固定・投稿ページにショートコードで.phpファイルを呼び出せたら便利だなと思って今回の投稿になりました。

一例として、今回の投稿ページの一番下に、当ブログのカテゴリ「ブログ運営」の記事をランダムに5件表示するようにしてみます。

固定・投稿ページでショートコードを使用できるようにする

子テーマのfanction.phpに、以下のコードを追記します。

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

これだけで、投稿・固定ページで、ショートコードが使用できるようになります。

自分で作成したプログラムやテンプレートの.phpが準備出来たら、以下のようなショートコードで呼び出しできます。

表示したい場所に（[]は除いています）

myphp file='ファイル名'

と記入することで、該当プログラムを表示できます。

記事をランダムに表示する.phpプログラム

どれでも良いのでお手元の.phpファイルを、以下のコードに書き換えて保存します。（.txtに書いて、.phpの拡張子で保存しても良いと思います。文字コードはUTF-8）

今回はファイル名を「random2.php」にしました。

<?php
$args = array(‘posts_per_page’ => 5, ‘orderby’ => ‘rand’, ‘cat’=> 12);
$query = new WP_Query($args);
?>
<?php if( $query->have_posts() ) : ?>
<div class=”rand_list”><ul>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<li>
<div class=”rand_thumbnail”><a href=”<?php the_permalink() ?>”><?php the_post_thumbnail(array(120,67)); ?></a></div>
<div class=”rand_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></div>
</li>
<?php endwhile; ?>
</ul></div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

このプログラムでは、以下のように処理内容を変更出来ます。

・表示記事数

'posts_per_page' => 5

数字を変更することで、記事数を変更できます。

・表示方法

'orderby' => 'rand'

今回は、ランダム表示なので「rand」ですが、「date」で投稿日順、「modified」で更新日順など変更できます。

・表示カテゴリ

'cat'=> 12

数字はカテゴリIDです。今回はカテゴリ「ブログ運営」のID「12」を入れています。

この.phpファイル「random2.php」を、ftpソフトなどで、function.phpと同じ階層にアップロードします。

これを呼び出すには、投稿ページなど表示したい場所に以下の様に記入します。（[]は除いています）

myphp file='random2'

css

因みにcssのデザインは、サイドバーの新着記事と似たような感じにしました。

.rand_thumbnail img{
width:120px;height:67px;
float: left;
margin-right: 7px;
}
.rand_title a{
display: block;
height: 67px;
font-size: 16px;
color:#403b3b;
overflow: hidden;
text-decoration:none;
}
.rand_title {overflow: hidden;line-height: 1.4;}
.rand_list li:hover{background-color: #F8F8FF;}
.rand_list li{list-style:none;padding:0;padding-top: 9px;padding-bottom: 9px;}
.rand_list ul{padding:0;margin-bottom:7px;}

実行結果

結果はこのようになりました。リロードすると記事が入れ替わります。