今回はちょっと欲張りな記事になります。
１．ショートコードでphpファイルを呼び出し、
２．jQueryでタブの切り替えを行い、
３．最新の投稿記事・更新記事を一覧で表示する。
まずは全体の動きを説明すると、
・PHPのソースコードを使うためにWordpressの投稿記事内にショートコードを埋め込む。
・ショートコードでphpファイルを呼び出す。
・phpにより投稿記事を呼び出す。
・タブの切り替えはjQueryを用いる。
・見た目を整えるためにcssファイルを準備する。
・Wordpressから投稿記事・更新記事の一覧を取得する。
・cssで再度見た目を整える。
これを実現するのに、wordpress、php、jQuery、cssと色々と出てきて大変ですが、一つ一つ見ていくとクリアできます。
今回の目的は以下の様な状況で説明しています。
・wordpressの固定ページをトップページとして設定している。
・トップページに記事一覧や更新記事一覧を表示する。
PHPのソースコードを使うためにWordpressの投稿記事内にショートコードを埋め込む。
固定ページにphpのコードを記述したいところなのですが、wordpressの投稿記事内には直接phpを記述することが出来ません。
Exec-PHPなど、直接PHPを書き込めるプラグインもある様ですが、セキュリティの問題上やめた方がいいというアドバイスがWordpressのフォーラムにも記載されていましたので今回は見送ることとします。
今回は、ショートコードからPHPファイルを読み出すという方法を採用することにしました。
ショートコードを利用するためには、以下のソースコードをfunctions.phpに追記します。
functions.phpは子テーマで新たに作成したものに記載します。
ショートコードの埋め込みは、こちらのブログに記載されていたロジックを拝借しました。functions.phpからPHPコードを記載したPHPファイルを読み出す仕組みです。
※参照元のソースコード
//ショートコードを使ったphpファイルの呼び出し方法
function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(get_theme_root() . '/' . get_template() . "/$file.php");
return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');
ここで記述されている「include(get_theme_root() . ‘/’ . get_template() . “/$file.php”);」の部分でテーマに格納されたphpファイルを呼び出すのですが、
子テーマを設定している場合、このやり方ですと親テーマのパスを参照しに行ってしまいますので、以下のように呼び出し先を変更します。
※今回利用したソースコード
//ショートコードを使ったphpファイルの呼び出し方法
function Func_tab_change($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(get_stylesheet_directory() . "/$file.php");
return ob_get_clean();
}
add_shortcode('tab_change', 'Func_tab_change');
?>
「get_stylesheet_directory()」は、子テーマのローカルファイルのリンクを取得してくれます。
子テーマを使用している場合、子テーマのディレクトリの URI を返します。 親テーマのディレクトリを取得するには get_template_directory_uri() を使用してください。
ローカルファイルへのリンクが欲しい場合は、get_stylesheet_directory()/enを使用してください。
（Wikiより）
また、「add_shortcode(‘tab_change’, ‘Func_tab_change’);」の部分で、ショートコードの名称を決められるので、tab_changeに変更しておきます。
次に呼び出し先のPHPファイルを準備します。今回作成したショートコードは[tab_change file=”new”]というように利用します。※[ショートコード名称 file=”phpファイルの名前”]
今回は記事の最新の投稿情報をnew.phpに、最新のコラム情報をcolumn.phpより出力するように作成します。
new.phpを以下の様に作成します。
ここでも、先ほど参照した記事を参考にさせて頂きました。
※参照元のソースコード
<h2>最新記事 5件</h2>
<ul>
<?php query_posts('showposts=5');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php the_time('Y年n月j日'); ?>：<?php $c = get_the_category();
echo '<a href="' . get_category_link( $c[0]->term_id ) . '">' . $c[0]->name . '</a>'; ?>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
<div class="clear"></div>
</ul>
色々と調べたのですが、このコードで使われている「query_posts()」はwiki上でも「決して使わない下さい」と書かれていました。
どうやら代わりにget_posts()が利用できるとのことですので、それに併せて周辺のコードも変えていきます。
<ul>
<?php
$args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 1 );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post );
$id = $post->ID;
?>
<li>
<a href="<?php echo get_the_permalink( $id ); ?>"><?php echo get_the_title( $id ); ?></a>…<?php echo get_the_date('Y/m/d', $id ); ?><br/>
</li>
<?php endforeach;
wp_reset_postdata();?>
</ul>
get_posts( $args )にはパラメータをセットすることで、様々な呼び出し条件を指定することが出来ます。
‘posts_per_page’ => 5 5記事までの情報を取得します。
‘offset’=> 1 投稿された記事を1つずつずらして表示させます。
‘category’ => 1 今回は表示するカテゴリを指定したいので、カテゴリIDを指定します。カテゴリIDはwordpressで「カテゴリ」を表示させるとURLのところに表示されています。
さらに更新日時順に表示した場合には、orderebyパラメータを追加するとよいでしょう。
‘orderby’ => ‘modified’
これにより取得された$mypostsの中身を
を追記して出力してみると、投稿IDやらカテゴリや投稿日時など、投稿に関するあらゆる情報が格納されているのが分かりました。
今回はIDのみを使うので、$idに格納して利用します。
投稿タイトルやURLはそれぞれ、以下の関数を利用した方が使い勝手が良いので変更します。
get_the_permalink( $id ) $idの投稿IDのURLを取得する
get_the_title( $id ) $idの投稿IDのタイトルを取得する
get_the_date(‘Y/m/d’, $id ) $idの投稿日付を’2015/01/01’の形式で取得する
これによって、ショートコードからPHPファイルを読み出し、カテゴリーの投稿データを取得することが出来るようになりました。次に取得した投稿データをjQueryを用いてwordpressの固定ページに出力していきたいと思います。
jQueryを利用してタブの表示を切り替える。
jQueryを利用するためには、事前にjQueryを使えるように子テーマのfunctions.phpに追記しておきます。
今回利用するjQueryのコードは新たに、「tab_change.js」というファイルを作成して記述します。このファイルは
子テーマのフォルダ内にjsというフォルダを新たに作成し、格納します。
function tab_change() {
wp_enqueue_script( 'tab_change', get_stylesheet_directory_uri() . '/js/tab_change.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'tab_change' );
wp_enqueue_script()で、jQueryを呼び出す。
今回は子テーマを利用しているので、get_stylesheet_directory_uri()を使っていますが、親テーマを使っている場合には、get_template_directory_uri()を使うと良いでしょう。
ここで作成したtab_change()は特に別の場所で呼び出す必要はありません。
今回jQueryを用いてタブで表示を切り替える仕組みはこちらのサイトを参考にソースコードを利用します。
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こちらの記事を参考に以下の様にソースコードを組みます。
HTML
<ul class="tab"> <li class="select">新着情報</li> <li>新着コラム</li> </ul> <ul class="content"> <li class="tab_li">[tab_change file='new']</li> <li class="tab_li hide">[tab_change file='column']</li> </ul>
jQuery
jQuery(function($) {
//クリックしたときのファンクションをまとめて指定
$('.tab li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
//indexという変数に代入します。
var index = $('.tab li').index(this);
//コンテンツを一度すべて非表示にし、
$('.content li.tab_li').css('display','none');
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content li.tab_li').eq(index).css('display','block');
//一度タブについているクラスselectを消し、
$('.tab li').removeClass('select');
//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('select')
});
});
参照元のソースコードでは1行目は
「$(function() {」となっていますが、Wordpressでは$が競合を起こしてうまく使えないらしいので、
「jQuery(function($) {」の様に変更しておきます。中身の$はそのままでOKです。
jQuery内のどこをクリックしたらどこのcssを変更するのか、条件に応じてコードを修正します。
HTMLの中で、class=”content”の中のliにclass=”tab_li”を指定していますが、これはcssのためではなく、jQueryでこのliの属性を変更させるためのliの指定のために記載してあります。
これがないとliが入れ子になっている関係でうまく作動しないという結果になってしまいます。
これを実際にブラウザで確認すると以下の様にソースが表示されているのが分かります。
<ul class="tab"> <li class="select">新着記事</li> <li>新着コラム</li> </ul> <ul class="content"> <li class="tab_li"><ul> <li class="tab_list"> <a href="記事1のurl">新着記事1</a>…2015/10/13<br/> </li> <li class="tab_list"> <a href="記事2のurl">新着記事2</a>……2015/09/15<br/> </li> <li class="tab_list"> <a href="記事3のurl">新着記事3</a>……2015/09/06<br/> </li> <li class="tab_list"> <a href="記事4のurl">新着記事4</a>…2015/08/29<br/> </li> <li class="tab_list"> <a href="記事5のurl">新着記事5</a>…2015/08/28<br/> </li> </ul></li> <li class="tab_li hide"><ul> <li> <a href="コラム記事1のurl">新着コラム1</a>…2015/10/27<br/> </li> <li> <a href="コラム記事2のurl">新着コラム2</a>…2015/09/29<br/> </li> <li> <a href="コラム記事3のurl">新着コラム3</a>…2015/09/18<br/> </li> <li> <a href="コラム記事4のurl">新着コラム4</a>…2015/07/11<br/> </li> <li> <a href="コラム記事5のurl">新着コラム5</a>…2015/07/10<br/> </li> </ul></li> </ul>
