[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連載で記事を書くことがあるかと思います。

そんなとき、記事内に連載記事の一覧表示がかんたんにおこなえるとGoodです。

今回、基本的なPHPでちょいちょいっと実装することができたので、本記事で紹介します。

また、本記事ではWordPressのショートコードを利用しています。以下の記事をかるく見ておくと、よりスムーズに実装できるので一読してみてください。

参考WordPress投稿ページにPHP利用→ショートコードを使おう！ | vdeep

手順としては、以下の流れのとおりです。

この手順でおこなえば実装できそうですね。というわけで、さっそく実際の作り方を見ていきましょう。

スポンサーリンク

連載記事をまとめたPHPファイルを作成する

まずは連載記事をまとめたPHPファイルを作成します。

配置場所はテーマが置いてある場所にFTPソフトなどで配置しましょう。具体的な場所は「（WordPressをインストールした場所）/wp-content/themes/（使ってるテーマ）」とかですかね。

そこに、適当な名前をつけたPHPファイルを作成。functions.phpと同じ場所にあることを確認してから作成しましょう。

今回は、実際の例として『仮想環境構築ツール”Vagrant”の連載記事一覧』という内容で話を進めていきます。なので、分りやすいように「series_vagrant.php」というファイル名にしました。

<?php
/**
 * 連載情報のリスト生成
 * 次の形で追加していく↓
 * "URL" => "TITLE",
 */
$series_list = array(
  "http://vdeep.net/mac-intr-vagrant" => "Macに『Vagrant + VirtualBox』を導入する手順",
  "http://vdeep.net/windows-vagrant-virtualbox" => "Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう",
  "http://vdeep.net/mac-howto-vagrant" => "MacでVagrantを立ち上げてみよう！Boxの取得から起動・停止・削除まで",
  "http://vdeep.net/vagrant-cloud" => "『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう",
  "http://vdeep.net/vagrant-start-web-server" => "Vagrantで仮想マシンに接続＆Webサーバを立ち上げてみよう",
  "http://vdeep.net/first-vccw" => "『Vagrant+VCCW』でWordPressローカル環境を構築してみよう",
  "http://vdeep.net/vccw-wordmove" => "本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期！",
);

# 現在表示しているページのURL
$current_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") .
               $_SERVER["HTTP_HOST"] .
               $_SERVER["REQUEST_URI"];

# リストのHTML生成
$ret_list = "<ol class='series_list'>" . "\n";

foreach ($series_list as $key => $value) {
  # 現在表示ているページはリンクを貼らずに、右に本記事を表す文字を追記する
  if ($current_url === $key) {
    $ret_list .= "<li>" . $value . " <- 本記事</li>" . "\n";
  } else {
    $ret_list .= "<li><a href='" . $key . "'>" . $value . "</a></li>" . "\n";
  }
}

$ret_list .= "</ol>\n";

# echo
echo $ret_list;

次の箇所を、「“URL” => “タイトル”,」となるように、作成したい記事一覧に合わせてリストを作ってみてください。

ちなみに、現在見ている記事は「掲載一覧ではリンクさせない ＋ 右側に”<- 本記事”の文字を追加」という仕様にしてみました。

現在見ているURLが完全一致しないと、通常通りリンクが貼られてしまうので注意してください。URLの後ろの
「/」などが含まれているかどうか確認しておくと良いですね。

もし、連番（数字）ではなくて・（丸）のリストにしたい場合は、23行目と34行目の「ol」を「ul」に変更してください。

phpファイルが作成できたので、このファイルを呼び出すコードを設置していきましょう。

functions.phpからショートコードを呼び出す

次に、「functions.php」からショートコードを呼び出す記述をおこないます。

次のコードをfunctions.phpに記述しましょう。

<?php
function short_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('myphp1', 'short_php');

子テーマを使っている場合、7行目を次のように書き換えます。

include(get_theme_root() . '/' . get_template() . "/$file.php");

↓

include(STYLESHEETPATH . "/$file.php");

ちなみに、過去にfunctions.phpに上記のコードを書いている場合、使い回しができるので改めて記述する必要はありません。

私は以前このコードを別の実装で使っていたので、今回は使い回しています。

作成したショートコードを投稿ページから利用する

投稿ページから次のコードを記述すれば、作成した掲載記事一覧が表示されます。「テキストモード」で記述しましょう。

[myphp1 file="作成したphpファイル名"]

↓本記事の例の場合は以下のとおり

[myphp1 file="series_vagrant"]

投稿すると、次のように記事の一覧が表示されました。

こうすることで、作成したPHPファイルをいじるだけで、設置した記事すべてに変更が反映されます。わざわざ全記事を変更する必要がなくなって便利ですね。

また、今回は「series_vagrant.php」としましたが、新しく「series_harinezumi.php」や「series_joshikai.php」「series_orenohanashiwokike.php」とかとか、なんでも作れるかと思います。

おまけ: CSSで見た目をオシャレにしてみる

CSSがいじれる方は、次のコードを例にしてデザインを変更してみましょう。「style.css」の一番下あたりに記述すればOKです。

/* seriesリスト */
.series_list {
  padding: 25px 30px !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 1px #ccc;
  list-style-position: inside;
  counter-reset: series-count;
  margin: 0;
}
.series_list li {
  margin: 5px 0;
  padding-left: 35px;
  line-height: 1.7 !important;
  position: relative;
  list-style:none;
}
/* 連番部分 */
.series_list li::before {
  counter-increment: series-count;
  content: counter(series-count);
  background: #afd9c0;
  width: 24px;
  height:  24px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 2px;
}
/* Series文字部分 */
.series_list li:first-child::after {
  content: "Series";
  display: block;
  position: absolute;
  top: -48px;
  left: 5px;
  padding: 0 15px;
  background: #fff;
  font-size: 20px;
  color: #444;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
}

次のようになりました。

borderなどで枠を良い感じに囲い、Series文字を追加してみました。

ところどころ「!important」を使っていますが、僕が使ってるテーマに合わせて記述してるので、気になる方は削除するか優先度を適宜変更してください。

数字の装飾は、下記の記事を参考にしました。

参考[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm

なお、お使いのテーマによってレイアウトは変わるかと思います。自分でカスタマイズできる人は自分好みに調整してみてください。

けっこう無理やり書いてるところがあるので、できる人は自分でCSS書いちゃった方がうまくいくかもしれません。参考程度に。。

スマホ用のコードは特に書いてませんが、スマホでの表示が気になる方はメディアクエリなどを使ってレイアウトしてみてください。

なんだかんだオシャレになって良い感じです。

ショートコードを使った前後のレイアウトが崩れてしまう場合

WordPressの仕様（というかバグ？）で、ショートコードを使った前後のレイアウトが崩れる場合があります。

その場合はpタグでショートコードを囲ってあげると解決するみたいです。

<p>[myphp1 file='ファイル名']</p>

もしレイアウトが崩れてしまったときは試してみてください。

まとめ

PHPとショートコードを利用することで、連載記事一覧機能を実装することができました。

CSSを使えば、見た目もオシャレに変更できました。

CSSで装飾しなくても、連載記事一覧の機能を使うだけで十分便利に使えるかと。参考になれば幸いです。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

ちなみに、プラグインとかはぜんぜん調べてないのでプラグインがあるならそっち使った方が楽かもしれません。はい、ただの思いつき記事です(`･ω･´)

Web開発のお仕事を募集しています