WordPressでサイドバーに画像付きでリンク集を作成する

わたしゃのぉ、古の時代にブログをやっていたんじゃ(黒歴史)

で、その際にサイドバーにベタベタと「リンク集」なるものを作成して、友人のブログリンクを貼ったものじゃよ(懐古終了)。

 

ところで・・、

 

WordPressでリンク集の作成はできないの?
できます。

 

できるんですよ。
コアな内容と合わせて2回の構成でお送りしたいと思う。
(今回は基本編)

 

このサイトではウィジェットも旧来の表示にしています。
「Classic Widgets」プラグインを適用していない方は、若干表記した項目が違うかもしれない。悪しからず。

 

その他の導入プラグイン内容を知りたい方は、こちらの記事をご覧ください。

どこに行こうかな

追記:長くなったから2つに分けますわ。 WordPressの機能拡張・補助編はこちらからどうぞ。 このサイ [?]…

 

 

 

サイドバーエリアにウィジェットを追加

 

WordPress左側ダッシュボードの🖌外観 >ウィジェット

カスタムHTML(またはテキスト)の設置位置をサイドバーエリアに選択し、ウィジェットを追加

 


追加したら、サイドバーエリアを展開し、カスタムHTMLを展開する。

このようなウィジェットが追加された。ここで、「タイトル」と「リンクを貼りたい内容」を記載していく。

タイトルは普通に「リンク」でよいと思う。

 

内容はHTMLコードを書かなければならない

このページを見ているのが古の時代を生きたオタクならば、そう難しくないだろう。

 

黒歴史をイジるともれなく反射ダメージを食らう。
イテテテテテ

 

9999の タ”メーシ”を うけた! ▼

 

テキストの場合は、「ビジュアル」「テキスト」と選択できると思うので、「テキスト」で内容を入力して、「ビジュアル」で内容プレビューができる。

プレビューできるテキストの方が初心者には使いやすいかと思う。

(カスタムHTMLで紹介しててごめん)

 


ウィジェットの内容部分にHTMLコードを書く

 

主に使うタグを4つ記載しよう。

aタグ <a>
imgタグ <img>
フォントタグ <font>
改行タグ <br>

 

段落タグ <p>を使った方が綺麗なんだろうな~。まあいいや。

 

上に挙げたHTMLタグのうち、<img>、<br>に終了タグは要らない(特殊)。

 

特殊って何? とか思うかもしれないが、漢字で言う浴衣(ゆかた)とか
通常読みではないものだと思ってください。

「HTML」について他サイトで調べればわかりやすい解説がいくらでも出てくる

なのでここでは「コピペして中身を改変して使え」という感じでしか書きません。

 

はい。

文字のみでリンクを作成する(基本形)
<a href=”リンクしたいサイトのアドレス(URL)をここに入れる”><font size=”4″>リンク先のサイト名を入れる</font></a>
まあわかる。
画像入りでリンクを作成する
<a href=”リンクしたいサイトのアドレス(URL)をここに入れる”><img src=”リンク用の画像を用意して入れる”><font size=”4″>リンク先のサイト名を入れる</font></a>

 


意味不明だぞ。

 

「リンク用の画像」ってなんだよ。

 


ごめん。

リンク用の画像は、「OGP画像」にすればいいから。

 

???

全然わからないぞ。

 

OGPとは: Open Graph Protcol の略。
Facebook、Twitter、LINEなどのSNSでシェアした際に、タイトルと画像とリンクのカードのようなものがペーストされる。
その「カードのようなもの」のこと。

 

小難しく言うんじゃねェェ~!(#^ω^)

で、OGP画像とやらはどこで取得すればいいんだ?

 

「ogp画像 確認」で検索。

出てきたツール自体に大差はないので、どれを使ってもよろし。

ラッコツールズ

URLを入力すると各SNS(facebook・twitter・はてなブックマーク・LINE)でページをシェアした際のOG…

 


OGP画像を取得する

 

「URL」欄にリンクしたいサイトのアドレス(URL)を貼り付ける

程なくして様々なSNSでシェアした際の結果が表示される。

 

で、SNSの種類はどうでもいいので、「リンクしたいサイトのアドレス(URL)」と「リンク用の画像(OGP)」をコピーする。

 

さっきの「コピペすればいける」ようにしておいた、画像入りでリンクを作成するに入れる。

例) <a href=”https://boueki-info-bonvoyage.com/”><img src=”http://boueki-info-bonvoyage.com/wp-content/uploads/2021/11/slide1-scaled.jpeg”><font size=”4″>リンク先のサイト名を入れる</font></a>

こんな感じ。

これをカスタムHTMLウィジェットの「内容」に入れて、保存を押せば出来上がり。

(作業終了)

 


サイトを表示して確認する。
はい。画像付きリンクができました。ちょっとアレンジを入れました。

 


他に、「リンク文字色の変更」や、「紹介する文書を入れたい」場合は、<br>タグを使ったり、タグの組み合わせ位置を変えるなりすれば良い。

 

例)<a href=”リンクしたいサイトのアドレス(URL)をここに入れる” style=”color:#89ced3;(リンクの文字色変更)”><font size=”4″>リンク先のサイト名を入れる</font><img src=”リンク用の画像を用意して入れる”></a>紹介する文書<br><br>
カスタムHTMLウィジェットに<br>で改行を入れながら下に展開していけば、複数サイトの掲載(リンク集)にすることができる。