ワードプレステーマのストークでショートコードを使った関連記事表示テクニックと設定方法

ワードプレスでの関連記事の紹介リンクの作成はどのようになさっていますか？

例えば下記にあるテキストでの関連記事紹介ですが・・・

関連記事⇒８７年式カワサキエリミネーター２５０サイドカー仕様に乗っています

関連記事⇒初めての２５０CCサイドカー！購入先とコーナリング方法

これを作成する作業自体は極めて簡単な作業ですが実際やってみるとなかなか面倒臭いものです。

念のため関連記事表示の作業方法をご紹介しておきます。

もしリンク作成ショートタグが存在しない場合は下記のコードにurlと文字列を埋め込みます。

⚠️ブルゾンちえみ３５億.コムというサイトは実際に存在するかは未確認です。

ものぐさの僕は関連記事矢印と入力して対象記事のURLをコピーして来て貼り付けてまた戻って記事タイトルをコピーして貼り付けてと面倒でたまりません。

もっと良い方法は無いものかと考えているときに偶然調べ物で検索にヒットした記事にカッコよく画像付きの関連記事を表示する方法を発見しました。

これですね↓

しかもカッコ良いだけでなく手間を掛けずに関連記事を記事内に埋め込むこが可能になるのです。

面倒な作業から解放されるならチャレンジする価値はあると考え思い切って実践してみましたので記録的な意味でもご紹介いたします。

おおまかな手順と必要な設定

コードはこちらのサイトさまから頂戴致しました。ありがとうございました。
bridge→brige

このコード追記によって紹介したい関連記事のIDを素早くピックアップし記事作成画面上からショートタグに記事IDを入力するだけで手間をかけずに画像付きリンクで記事を紹介できます。

カスタマイズコードは以下です。

​
add_filter(‘manage_posts_columns’, ‘posts_columns_id’, 5);<br /> add_action(‘manage_posts_custom_column’, ‘posts_custom_id_columns’, 5, 2);<br /> add_filter(‘manage_pages_columns’, ‘posts_columns_id’, 5);<br /> add_action(‘manage_pages_custom_column’, ‘posts_custom_id_columns’, 5, 2);<br /> function posts_columns_id($defaults){<br /> $defaults[‘wps_post_id’] = __(‘ID’);<br /> return $defaults;<br /> }<br /> function posts_custom_id_columns($column_name, $id){<br /> if($column_name === ‘wps_post_id’){<br /> echo $id;<br /> }<br /> }<br />

コードをfunction.phpファイルに挿入

ファンクションphpファイルはテーマを構築している重要なファイル。

先ずはバックアップを取っておくことを忘れずに。

無茶苦茶にしてしまうと育ててきた大事なワードプレスサイトがぐちゃぐちゃに崩れてしまいます。

実際に僕はグッチャグチャにしてしまいました。

かなり焦ったのは間違いないですがプラウザの戻る機能で文字化けしない画面に辿り付きコピーしておいたファイルをコピペし直して無事に復帰出来ました。

この様になった原因は追記するコードを掘り込んだファイルの位置にありました。

どこに掘り込んでも良いということでは無かったのでちゃんと調べてアタマに入れました。

理解したことのまとめ

functions. phpファイルは「 <？php 」から「 ？> 」まで囲まれている部分で構成しています。

このphpファイルの中に関数とよばれるコードが入っています。

関数の基本的なルールは「function」の表現からスタートし「 } 」までの区切りになっています。

このブロックの後に先ほどの関数を働かせるためのワードプレス命令文となる「 add_filter(命令文); 」などの命令が配置される構造になっています。

さて今回のように関連記事を画像付きで表示するためのコードを追記したい場合は何処に掘り込むのが良いのでしょうか？

自分で調べた範囲では次の3箇所に追記しても問題がないと理解しました。

結果的に今回はphpファイルのスタートを示す「 <？php 」の後に追記したのですが問題なく記事IDが表示されるように設定出来ました。 本当は1番最後に入れたかったのですが僕が馬鹿なのか「 ？> 」の場所が確認出来なかったので冒頭の箇所に入れました。

具体的な手順

まずワードプレスの管理画面から左サイドメニューの外観→テーマの編集に入ります。

テーマ編集画面の右サイドメニューからテーマのための関数の見出しfunctions.phpを選択しファイルを開きます。

ファイル冒頭に見える「 <？php 」の段落あとにコピペしたカスタマイズコードを貼り付けます。 管理画面下のファイルを更新ボタンをクリックし更新されたことを確認します。 投稿一覧画面に戻り個別記事のIDナンバーが表示されていれば成功です。

プラグイン「AddQuicktag」をインストール

ショートタグを記事作成画面上に表示させるAddQuicktagというプラグインをインストールします。

このプラグインの使用で良く利用するタグなどをショートコードとして保存しておく事が可能です。

今回はストーク販売のオープンケージさん公式サイトから関連記事を表示するショートコードをAddQuictagに保存しておきます。

具体的な手順

プラグインの画面から新規追加に入り検索窓へAddQuicktagを打ち込みます。

検索結果から今回の該当プラグインを選択しインストールします。

インストールしプラグインを有効化の後、管理画面左サイドメニューから設定に入ります。

AddQuicktagを選択、ボタン名と開始タグの項目に関連記事の表現とショートコード＜［kanren postid=”○○○○”]　＞を入力し変更を保存ボタンをクリックし設定を完了させます。

記事内に紹介したい関連記事を埋め込む

投稿の編集画面開き関連記事を置きたい位置に先ほどAddQuicktagに保存したショートコードを選びクリックします。

記事内にショートコードが入力されていますのでコードの中身に記事IDナンバーを入力するだけで画像付き関連記事がとっても簡単に表示できます。

以上で関連記事を効率良く表示させるための設定作業は完了です。

ご参考になれば幸いです。

こんな感じのカッコいい関連記事のご紹介になります！

ワードプレスの設定でお困り事はありませんか？直々にアドバイス致します！

2017-08-20