サイドバーにリンク付き画像を置くのにウィジェットを利用しようとするも、画像のみ、もしくはテキストのみのウィジェットしかなく、リンク付き画像するためにはHTMLで書かなければなりません。
例えば投稿や固定ページのように「メディアを追加」機能があれば良いのですが、ウィジェットにはそれがなく、定期的にバナーを差し替えたりするのに都度HTMLを書くのは手間ですよね。
そこで、テキストウィジェットを使ってリンク付き画像を置くショートコードを作りました。
仕様
- 検証バージョン：WordPress 4.8.1
- テキストウィジェットを利用し、ショートコードで画像＆リンク先を指定
- 画像はメディアへアップロードしたものを利用
- リンクは別窓で開くものとします
コード
function.phpに記述するコード
function.phpの編集に慣れていない方は、function.phpの最終行以降に追加しましょう。（途中に挿入したりしない）
// ウィジェット内でショートコードを有効にするための設定
add_filter('widget_text', 'do_shortcode' );
function imgLink($atts){
extract(shortcode_atts(array(
'name' =>null,
'url' =>null
),$atts));
$bannerData = get_page_by_title( $name, OBJECT, 'attachment' );
$imgId = $bannerData->ID;
$imgCaption = get_post_meta($imgId, '_wp_attachment_image_alt', true);
$imgData = wp_get_attachment_metadata($imgId);
$imgPath = wp_upload_dir()['baseurl'].'/'.$imgData['file'];
$src = '<p>'; // 開始タグ
// 画像にリンクする場合
if($url != null) {
$src = '<a href="'.$url.'" target="_blank">';
$src .= '<img src="'.$imgPath.'" alt="'.$imgCaption.'">';
$src .= '</a>';
} else {
// リンクしない場合
$src = '<img src="'.$imgPath.'" alt="'.$imgCaption.'">';
}
$src .= '</p>'; // 終了タグ
return $src;
}
add_shortcode('img','imgLink'); //前者がショートコードなので分かりやすい名前にしましょう。
以上で前準備は完了です。
ショートコードの使い方
まず、画像をアップロードします。
画像には
- タイトル
- 代替テキスト
を、それぞれ設定します。
代替テキストには、画像の説明文を記入してください。
画像をアップロードしたら、外観 ＞ ウィジェットのページから、リンク付き画像を置きたいウィジェットスペースを選択し、利用できるウィジェットの中から「テキスト」を選んで、ウィジェットスペースへ追加します。
ウィジェットの本文に、先に設定したショートコードを記入します。
[img name="画像のタイトル" url="リンク先URL"]
例えばこの画像を使う場合は、
[img name="banner" url="http://hoge.com"]
という書き方になります。
リンクせず画像のみを置く場合は
[img name="banner"]
と書きます。
ショートコードを書いたら、最後にウィジェットの保存ボタンを押して保存します。
これでリンク付き画像が完成しています。
実際にページを見てみると、このようになります。
出力されるHTML
<div class="textwidget">
<p><a href="http://hoge.com" target="_blank"><img src="サイトURL/wp-content/uploads/2017/09/banner.png" alt="バナー"></a></p>
</div>
※src="..."のuploads以降のディレクトリは画像ごとに異なります。
利用しているテーマやテンプレートファイルの設定によりますが、デフォルトのままであれば
<div class="textwidget">...</div>で囲われます。
また、画像のalt属性に「代替テキスト」が適用されているのがわかります。
尚、ショートコードは投稿や固定ページの本文でも同じ使い方ができます。
以上です。
今回はこのようなショートコードを作りましたが、実際はもっと簡単にリンクくらい貼れると思うのですが…私が知らないだけでしょうか…。
もし分かる方がいらっしゃったら是非教えていただけると助かります。