WordPress カスタムメニューに画像を使うシンプルな方法

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約4年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | |

WordPress カスタムメニューに画像を使うシンプルな方法

こんな私にも WordPress に関して御質問を頂戴する事があります。

実は御質問は大歓迎!(解決できるかは別です><)

なぜなら、私も学べるからです。

先日、ほとんど使ったことない機能 カスタムメニュー について御質問を頂きました。

(ほとんど解決できませんでしたが・・・)

そして、その流れで「カスタムメニューを画像にする」方法を色々と調べましたが、どれも難易度高めの解説。

ある程度詳しい人ならばフムフムという素晴らしい内容なのですが、私なんか基本が大雑把なもんで、あまり細かいのは好まないし、そもそも知識がありません。

なので、最もシンプル!という方法を御紹介したいと思います。

まずは画像(バナー)を用意

今回の目的は「カスタムメニューを画像にする」です。

で、画像を用意するんですが、大きくてもOKです。サイズは後で調整します。

縦横比は決めといた方がベターかな。

↓ こんなの用意してみた。

wp-plugin-cat-img

wp-memo-cat-img

今回用意したのは 横400px 縦100px です。

とりあえずテストなんで2つのカテゴリーを画像にしてみます。

カスタムメニューを用意

WordPress カスタムメニューに画像を使うシンプルな方法 1

今回はカテゴリーだけにしましたが、カスタムメニューですから「タグ」でも「任意の投稿」でもメニューとして表示可能です。

そして、画像にする方法は同じです。

用意した画像(バナー)をアップだぜ

画像をアップすると

WordPress カスタムメニューに画像を使うシンプルな方法 2

「ファイルのURL」が表示されるので、そのアドレスをコビー。

↑ こんな感じのね

ナビゲーションラベル

再びカスタムメニューに戻って

WordPress カスタムメニューに画像を使うシンプルな方法 3

ナビゲーションラベルの欄に ↓ こんな風に書きます。

欄が小さいけど頑張って入力します。

まぁ、普通はコピペするでしょうけど。

WordPress カスタムメニューに画像を使うシンプルな方法 4

ようするに

ってことなんです。

そして「メニューを保存」

すると ↓ こんな風になります。

WordPress カスタムメニューに画像を使うシンプルな方法 5

完成!

ウィジェットでサイドバーに表示してみましょう。

WordPress カスタムメニューに画像を使うシンプルな方法 6

サイズを調整するにはナビゲーションラベルに書いた width の値で調整してみて下さい。

あと、画像なんで alt とか title とか入れるべきなんでしょうが、超シンプルに説明したかったので書いてません。

書くなら

こんな感じでしょうか。

マウスを乗せた時に画像が変わったりとかは出来ませんが、とりあえずこんな方法も有るってことで。

どなたかの参考になれば嬉しいです。

WordPress カスタムメニューに画像を使うシンプルな方法」への1件のフィードバック

  1. ピンバック: Word Pressのメニューを画像にする方法 | 引き篭もりちゃんねる

コメントを残す

メールアドレスが公開されることはありません。

*