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

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

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

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

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

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

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

  • まずは投稿の編集画面、タイトル下部に”link”ショートタグをクリックします。リンクを貼り付けるためのウィンドウが表示されます。
  • 内部リンクを貼りたいページのURLを選びに行きコピーペーストします。記事タイトルをアンカーリンクにしたい場合はリンク文字列にコピーペースト。
  • 最後にリンク追加ボタンをクリックし、作成したリンクを踏んで指定したページ画面に飛ぶかを確認して終了。
  • もしリンク作成ショートタグが存在しない場合は下記のコードにurlと文字列を埋め込みます。


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

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

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

    これですね↓

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

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

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

  • 記事一覧ページに個別記事IDを表示させるためのカスタマイズコードを入手する。
  • 入手したコードをfunctions.phpファイルに追記する。
  • プラグイン「AddQuicktag」をインストール。
  • 紹介したい関連記事を埋め込む


  • カスタマイズコードを入手

    リンクを貼りたい関連記事を効率良くピックアップするために記事IDを記事一覧画面に表示させます。

    そのためにテーマファイルであるfunctions.(ファンクション)phpの中にコードを追記しカスタマイズしなければなりません。

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

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

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


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

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

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

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

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

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

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

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



    理解したことのまとめ

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

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

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

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

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

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

  • まずはphp始まりの「 <?php 」の段落後。
  • 次に「 } 」のあとに続く命令文が完了した箇所とfunction行の間。
  • php終了を示す「?> 」の前の箇所。
  • 結果的に今回はphpファイルのスタートを示す「 <?php 」の後に追記したのですが問題なく記事IDが表示されるように設定出来ました。 本当は1番最後に入れたかったのですが僕が馬鹿なのか「 ?> 」の場所が確認出来なかったので冒頭の箇所に入れました。

    具体的な手順

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

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

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

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

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

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

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

    具体的な手順

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

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

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

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

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

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

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

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

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

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

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

    2017-08-20

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    2 × 4 =

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    ABOUTこの記事をかいた人




    オートバイ事故で脊髄を損傷し下半身不随の身体で50歳という年齢を迎えることができました。 交通事故で車いす人生を送ることになってしまいましたが30年間の中で色々とチャレンジしてきたことをこのブログでお伝えできればと思っています。 主なテーマはつぎのようなカテゴリーです。 ・障害や脊髄損傷に関すること ・オートバイとサイドカーに関すること ・エレキギターに関すること ・柴犬に関すること ・その他 取り留めない内容をお届けするかと思いますが、よろしくお願いいたします。