【PHP×MySQL】サイコロジカルラインナビを自作しました

サイコロジカルラインをナビにしましたブログ

前回サイコロジカルラインを出力するプログラムを作成しました。

今回は回遊率アップを狙って日本株投資成績記事の関連記事をサイコロジカルラインをベースにしたナビに変更してみました。
なお、関連記事の表示はワードプレスのテーマCocoonに組み込まれている機能になります。

サイコロジカルラインとは

前回の記事で説明していますので上記の前回の記事をご覧ください。

なぜ関連記事を変えると回遊率が上がるのか

Cocoonの関連記事機能は、カテゴリーに関連付けるかタグに関連付けるかや関連記事に表示する記事の期間の設定が行えます。私は同じカテゴリーの記事を全期間で表示していたのですが、閲覧している記事とは関連性が低い状態となっていました(ただただ日本株投資成績の記事がランダムで表示されていた)。
ランダムで表示することで逆にその人にドンピシャの記事との運命の出会いが生まれる可能性もありますが、直近の過去記事やちょっと先の記事をナビとして出したほうが興味を持って見てもらえるのではと考えました。

新設したサイコロナビでは、サイコロジカルラインのように直近の12日間、そして未来の記事がある場合は最大3日間をナビに表示するようにしました。

関連記事表示
Before: 関連記事
サイコロナビ表示
After: サイコロナビ

サイコロナビの仕様

サイコロナビを作成するに当たり、仕様を以下としました。

  • 過去11日、未来最大3日分を表示(未来の記事数に合わせてサブタイトル可変)
  • 新しい記事を下に表示
  • 勝敗だけでなく連勝数、連敗数も分かるように数字も入れる
  • 投資結果の天気を表示
  • タイトルを表示し、テキストリンクを付与

複雑ではないので
 HTMLコードを作成 → そのコードを出力するPHPを作成
ではなく直でPHPを作成しました。

使用したテーブル

今回も以前の記事で作成した日本株投資成績のテーブルを利用しています。今回メインで使用しているのは以下の項目です。

  • title:投稿のタイトル([日本株成績XXXXXX]を除く)
  • continuous_days:連騰、続落の連続日数
  • weather:投資結果の天気(晴=1、晴ときどき曇=2、曇=3、雨=4、雷雨=5)

テーブルの内容について詳しくは以下の記事をご覧ください。

使用した天気アイコン

Font Awesomeにていいアイコンが仕入れられなかったので、Weather Iconsのアイコンを使っています。使用するためにはCSSを追加する必要があります。

外部CSSの追加方法

まずはCSSファイル(今回の場合はweather-icons.min.css)をサーバーにアップロードします。
次にヘッドタグ内にCSSの読み込みを追記します。

<link rel="stylesheet" href="CSSファイルへのパス" type="text/css" />

Cocoonを使っている場合のヘッドタグ内への追記方法は主に2種類があります。

  1. Cocoon設定から追記
    「Cocoon設定」→「アクセス解析・認証」タブ→「ヘッド用コード」欄に追記します。

    Cocoon設定から追記をする場合は、パスの指定にPHPは利用できません。

  2. 子テーマ内にあるhead-insert.phpに追記(こちらを採用)
    子テーマのディレクトリにあるtmp-userフォルダ内にhead-insert.phpというファイルがありますのでCSSの読み込みを追記します。
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/weather-icons-master/css/weather-icons.min.css" type="text/css" />

    get_stylesheet_directory_uri()で子テーマのディレクトリの URIが取得できます

作成したコード

前置きが長くなりましたが作成したコードをお見せします。コード内にコメントを結構入れてますのでポイントのみ補足します。

PHP

<?php

//offsetの値を取得(閲覧中の記事が最新から何番目か)
$slug = get_post(get_the_ID())->post_name;
$offset = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->org_stock_jp WHERE post_name >= '$slug' ORDER BY post_name DESC") - 1;

//テーブルにレコードが追加されていない場合は何も生成しない
if ($offset === -1) {
	echo '';
} else {
	//①
	//未来の記事があればmax3件まで対象に含める
	if ($offset > 3) {
		$limit = 15;
		$offset = $offset - 3;
	} else if ($offset <= 3) {
		$limit = 12 + $offset;
		$offset = 0;
	}

		//offsetした位置から12~15日ぶんのレコードを抽出
		$results = $wpdb->get_results("SELECT * FROM $wpdb->org_stock_jp ORDER BY post_name DESC LIMIT $limit OFFSET $offset");

		foreach ( $results as $value ) {

			//白丸と黒丸(数字付き)を生成
			$continuous_days = $value->continuous_days;
			$number = explode('.', $continuous_days);

			if ($number[0] > 0) {
				$cir_num = 11 + $number[0];
				$cir_num = '&amp;#93' . $cir_num;
			} else {
				if ($number[0] > -10) {
					$cir_num = 1 + abs($number[0]);
					$cir_num = '&amp;#1010' . $cir_num;
				} else if ($number[0] = -10) {
					$cir_num = '&amp;#10111';
				} else {
					$cir_num = 40 + abs($number[0]);
					$cir_num = '&amp;#94' . $cir_num;
				}
			}


			//天気アイコンを生成
			switch ($value->weather) {
				case 1:
					$weather = '<i class="wi wi-day-sunny"></i>';
					break;
				case 2:
					$weather = '<i class="wi wi-day-cloudy"></i>';
					break;
				case 3:
					$weather = '<i class="wi wi-cloudy"></i>';
					break;
				case 4:
					$weather = '<i class="wi wi-rain"></i>';
					break;
				case 5:
					$weather = '<i class="wi wi-thunderstorm"></i>';
					break;
			}


	    //title生成(閲覧中の記事は別処理)
			if ($value->post_name === $slug) {
				$title = '←イマココ';
			}else {
				$title = '<a href="' . '/result/stock/' . $value->post_name . '/">' . $value->title . '</a>';
			}


			//結合(新しい記事が下に来る)
			$code = $cir_num . ' ' . $weather . ' ' . $title . '<BR>'. $code;
		}

	  //サブタイトル生成
		if ($limit == 12){
			$subtitle = '<small><small><small>(過去11日)</small></small></small>';
		} else {
			$subtitle = $limit - 12;
			$subtitle = '<small><small><small>(過去11日+未来' . $subtitle . '日)</small></small></small>';
		}

		//コード生成
		$code = '<p><span class="related-entry-heading"><B>サイコロナビ</B> ' . $subtitle . '</span><div class="psy_nav">' . $code . '</div></p>';

		echo $code;
}
?>

以下補足です。

  1. 閲覧中の記事の位置に合わせて$offsetと$limitの値を調整しています
  2. 数字付きの白丸、黒丸は数値文字参照で表現しています

CSS

今回は文字の大きさを変えただけです。
「サイコロナビ」の部分は「関連記事」の見た目と合わせるためにrelated-entry-headingのクラスを付与しています。

関連記事とサイコロナビの出し分け

日本株投資成績の記事のみ関連記事の代わりにサイコロナビを表示するようにしたかったので出し分けが必要となりました。以下の手順で出し分けが可能となりました。

Step1. 子テーマ内に必要ファイルをコピー

関連記事の表示を行っているPHPファイルは初期状態では子テーマ内に存在していませんでした。
親テーマのディレクトリのtmpフォルダからsingle-contents.phpをコピーし、子テーマのディレクトリに同じように配置します(tmpフォルダを作成し、その中にペースト)。

子テーマに作成することにより意図しない上書きを防ぐことができます。

Step2. 出し分けのコードを追記

子テーマに作成したsingle-contents.phpに出し分けのコードを追記します(ハイライト部が変更箇所です)。

<?php
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

///////////////////////////////////////
// 投稿ページのコンテンツ
///////////////////////////////////////?>
<?php //パンくずリストがメイントップの場合
if (is_single_breadcrumbs_position_main_top()){
  get_template_part('tmp/breadcrumbs');
} ?>

<?php //本文テンプレート
get_template_part('tmp/content') ?>


<div class="under-entry-content">

  <?php //関連記事上ページ送りナビ
  if (is_post_navi_position_over_related()) {
    get_template_part('tmp/pager-post-navi');
  } ?>

  <?php //関連記事
    $slug = get_post(get_the_ID())->post_name;
    if (substr($slug, 0, 8) == 'stock-jp' AND is_numeric(substr($slug, -6))) {//日本株投資成績の場合はサイコロナビを表示
      get_template_part('tmp-user/psychological_nav');
    } else {
      get_template_part('tmp/related-entries');
    }
  ?>

  <?php //関連記事下の広告表示
  if (is_ad_pos_below_related_posts_visible() &amp;&amp; is_all_adsenses_visible()){
    get_template_part_with_ad_format(get_ad_pos_below_related_posts_format(), 'ad-below-related-posts', is_ad_pos_below_related_posts_label_visible());
  }; ?>

  <?php //投稿関連記事下ウイジェット
  if ( is_active_sidebar( 'below-single-related-entries' ) ): ?>
    <?php dynamic_sidebar( 'below-single-related-entries' ); ?>
  <?php endif; ?>

  <?php //関連記事下ページ送りナビ
  if (is_post_navi_position_under_related()) {
    get_template_part('tmp/pager-post-navi');
  } ?>

  <?php //コメントを表示する場合
  if (is_single_comment_visible()) {
    comments_template(); //コメントテンプレート
  } ?>

  <?php //コメントフォーム下ウイジェット
  if ( is_active_sidebar( 'below-single-comment-form' ) ): ?>
    <?php dynamic_sidebar( 'below-single-comment-form' ); ?>
  <?php endif; ?>

  <?php //コメント下ページ送りナビ
  if (is_post_navi_position_under_comment()) {
    get_template_part('tmp/pager-post-navi');
  } ?>

</div>

<?php //パンくずリストがメインボトムの場合
if (is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
} ?>

<?php //メインカラム追従領域
get_template_part('tmp/main-scroll'); ?>

スラッグにより日本株投資成績の記事かどうかを判定し、出し分けをしています。

参考サイト

あとがき

関連記事の置き換えはちょっと苦労するかなと予想していましたが、結構あっさり突破できました。(うまくいったときは小躍りしました)
全体を通してもスムーズに開発することができました。唯一はまったのはCocoon設定からのヘッダタグ内への追記でPHPが使えなかった部分です。

色々開発を進めてきて今回はテーマを弄ることもできました。ブログとして作ったものがすぐ形になるのはモチベーションになりますね。記事化は…。

コメント

タイトルとURLをコピーしました