今回は、WordPressのテーマ[TheThor]のショートコード(サイトカード)を使って、
記事中に関連記事のリンクを貼りつける方法を紹介/解説していきます。
●関連記事のリンクってよく見るけど、どうやって貼るの?
●TheThorの事なら何でも知りたい!
関連記事のリンクとは、
こんな感じのリンク。よく見ますよね!?
ブログの記事と記事をつなぐ扉みたいなイメージを持ってくれればOK♪
両方記事に関連記事のリンクを貼れば、どちらからも行き来が可能になります。
~関連記事のリンク 使い方の例~
●現在の記事の情報に加えて、「こんな情報もあるよ!」と追加情報として掲載する。
●現在の記事の補足として掲載する。
●おすすめグッズとかの記事で、「こちらもおすすめ!」と他のグッズ記事も一緒に掲載する。
オーソドックスな使い方としては、大体こんな感じです。
簡素な内容だけで終わる記事よりも、
途中に関連記事リンクを貼ることでSEOとしても効果があります!
さて、それでは解説していきます。
スポンサーリンク
■TheThorの機能 ショートコード
ショートコードとは!?
PHPのプログラムで記述したコードを、短いコード(ショートコード)を入れるだけで、
投稿ページへ呼び出し、実行することができます。
なお、PHPのプログラムをそのまま、投稿ページで記述しても、投稿ページでは、PHPの処理を行うことはできません。
つまり、プログラムの変換の役割も果たしているのがショートコードと事になります。
上記に、ショートコードの説明を書きましたが、
分かりづらければ、「TheThorの機能の一つ」だと思って下さればOKです!
それでは、実際にショートコードの使い方を解説していきます。
■記事内に関連記事のリンクを貼り付ける
TheThorでは、
関連記事のリンクを貼り付ける事が出来るショートコードを[サイトカード]と言います。
そのサイトカードを使って、これから関連記事リンクを貼り付けていきます。
《画像2》を参照。
投稿ページにて、①の場所にサイトカード(ショートコード)を入れていきます。
投稿ページのエディタが全然違う!という方。
[Classic Editor]というプラグインを入れていると、
《画像2》のようなビジュアルエディタが使用できます。
WordPress標準のブロックエディタより、ビジュアルエディタの方が断然使いやすくてオススメですよ。
《画像3》を参照。
②の[ショートコード]をクリックして、
その中から、③の[サイトカード(内部記事リンク)]をクリックしましょう。
《画像4》を参照。
そうすると、④の内容が入力されます。
ただし、このままでは、サイトカードは使用できません。
関連記事のURLやサイトカードがクリックされたときの、処理方法を入力する必要があります。
~サイトカードの入力事項~
『subtitle=関連記事』
サイトカードのタイトルを変えることができます。
初期設定では「関連記事」となっていますが、任意に「あわせて読みたい」とか、「こちらもおすすめ!」としてもOKです。
※この項目のみ全角文字が使用できます。
『url=』
記事のURL、つまりリンクを入力します。
下記の《画像5》の例では、「url=https://zenkai-blog.com/windows10-controlpanel-open/」と入力しています。
『target=』
こちらには、「target=self or blank」と入力しましょう。
サイトカードがクリックされた際、「URLに指定されたリンク先をブラウザの新しいタブで開く」という意味があります。
※ここでの入力は余計なスペースや、半角文字を全角にしてしまったりしてはダメです!
ショートコードとして機能しなくなるので要注意!
ちなみに、サイトカードは、
投稿ページのエディタ上では、《画像5》のように文字列として表示されます。
エディタ上では、具体的なイメージとしては表示されません。
投稿ページの[プレビュー]やWeb上へ[公開]することで、初めてイメージとして表示されます。
~実際の使用例~
●Windows10のコントロールパネルの開き方が分からない!●デスクトップにコントロールパネルのショートカットを作成したい。●そもそも、Windows10のコントロールパネルが何処にあるか分からない。 N[…]
こんな感じ!
入力事項の注意点はありますが、それさえ守ればカンタンですよ♪
以上で、解説は終了です。
お疲れ様でした!
■まとめ
今回は、TheThorの機能 ショートコードの一つである[サイトカード]を使用して、
ブログの記事内に関連記事リンクを貼り付けてみました。
TheThorのショートコードには、
他にも目次を貼り付けたり、外部サイトのリンクを貼りつけたり出来るものがあります。
TheThorの他のショートコードについては、また別の記事にて解説します。
ではでは!
スポンサーリンク