WordPress

〔WordPress〕カスタムメニューを画像で表示してくれるプラグイン

投稿日:2016-09-06 更新日:

業務の合間の空き時間、FileMaker関連記事を書くには時間が足りなすぎるというわけでどうしてもWordPressでついつい遊んでしまいます。というわけでなんかサイトの装飾ができないものかと・・・サイドバーのカスタムメニューを画像で表示できないものかなぁ??

プラグイン探しと参考にさせていただいたサイト

出るか出ないかわかりませんがググるしかありません!

wordpress メニュー 画像 表示

ヒットしました。「Nav Menu Images」プラグイン!!業務の合間30分ぐらいでなんとかできそうです。

[card url=”http://www.nishi2002.com/18644.html”] 

SEO的にも問題はなさそうなのでバタバタと実行してみるしかありません。

「Nav Menu Images」プラグインのインストール

このプラグインは”WordPress プラグインディレクトリ ”の中へ含まれていますのでインストールは簡単です。

  1. WordPress管理ダッシュボードよりプラグイン>>新規追加 を選択
    cap_no-0075
  2. 右上当たりの検索BOXに「Nav Menu Images」を入力又はコピー&ペーストでENTERキー
    SnapCrab_2016-09-06_17-12-40_No-0000
  3. 一番左上に該当するプラグインが表示されます。
    SnapCrab_2016-09-06_17-12-52_No-0000
  4. 今すぐインストールして有効化します。
    SnapCrab_2016-09-06_17-13-11_No-0000

「Nav Menu Images」プラグインを使ってみる

「Nav Menu Images」プラグインについてはダッシュボードからの設定とかはありません。

カスタムメニューを作成する時に使用します。

メニューに使用する画像を作成

先にサイドバーに合わせたメニュー画像を作成しなければいけません。設置場所の幅に合わせてオリジナルメニュー画像を作成してメディアへアップロードしておきましょう!

ちなみにコピペ10分でイラストレーターで作った私のサイドバー用メニュー画像。かなり手抜きです(;^_^A

ワンスポットのサイドバーはW300ピクセルですので300で大カテゴリのみ作ってみました。

pt-menu02-01pt-menu02-02
pt-menu02-03pt-menu02-04pt-menu02-05pt-menu02-06pt-menu-07pt-menu02-08     

メニューに画像を設定

カスタムメニュー作成時に”upload menu item images” のリンクが表示されています。ここより記事に画像を挿入する時と同じようにメディアより画像を選択するだけです。

SnapCrab_2016-09-06_18-20-12_No-0000

メディアより画像を選択すると下図のように確認することができます。同じ要領で次々設定していくだけです。画像の変更、削除もこの画面内でできます。

SnapCrab_2016-09-06_18-19-43_No-0000

Change menu item images : 画像の変更

Remove menu item images : 画像の削除

出来栄えは

yyyy-m-d_h-n-s_2o-00

サブメニューも合間の時間ができたら作成してみようと思います。

カスタムメニューについて

カスタムメニューについてはヘッダ、サイド、フッタ用に分けて作成しておいた方がいいかと思います。ヘッダ、サイド、フッタで別々にサイトに合わせたサイズで作成することができるようになります。

ワンスポットではまだ時間的都合でサイドメニューのみに設定してあります。

 

私事をこそっと報告

記事とは関係ありませんが、本日は私の誕生日でありました。9月6日 苦労する日とよく言われます(;^_^A この記事は本日の23時59分に投稿設定してあります。また明日から1年進化できるように努力していこうと思います。

  • この記事を書いた人
  • 最新記事
TWS-ch

TWS-ch

2018年01月07日の運営開始から1年経過しました。誠にありがとうございます。今後も困っている人をサポートできるようなコンテンツ作りを目指して頑張ってまいりたいと思います。よろしくお願いいたします。

-WordPress
-, , ,

Copyright© TWS-ch , 2019 All Rights Reserved.