カテゴリー:JQuery Accordion Menu Widgetの記事一覧

RICK式アフィリエイト実践記

ポイントサイト・アンケートサイト・趣味を起点としたアフィリエイトの実践記です。

カテゴリー:JQuery Accordion Menu Widget

「JQuery Accordion Menu Widget」のスキンが反映されない時の対処法

記事の概要

数日前に「JQuery Accordion Menu Widget」のスキンがが反映されず悪銭苦闘しました。

しかし、その末にスキンを反映する方法を見つけ今はスキンを反映することに成功しています。

この記事ではその原因と対処法について書きます。

スキンが反映されなかった原因

詳細の原因は不明ですが、何らかの理由で「JQuery Accordion Menu Widget」の”skin.php”が403エラーを返し働いていなかったのが原因のようでした。

”skin.php”にはウィジェット等にスキンを割り振る役目があったようですが、これが上手く働いていなかったためスキンが反映されなかったようなのです。

私が実践した対処法

ウィジェットの場合

手順1

「JQuery Accordion Menu Widget」をダウンロードします。
jquery-accordion-menu-widget-skin-001

手順2

「JQuery Accordion Menu Widget」の圧縮ファイルを展開し、展開したフォルダを開きます。
jquery-accordion-menu-widget-skin-002

手順3

正規表現が使えるテキストエディタを開き、手順2のディレクトリ内に”option.css”を作成します。テキストエディタは開いたままにしておいてください。その後、”skins”フォルダを開きます。
jquery-accordion-menu-widget-skin-003

手順4

任意のスキン(~.css)を開きます。
jquery-accordion-menu-widget-skin-004

手順5

手順4で開いたスキンの内容を手順3で作成した”option.css”にまるまるコピーします。
jquery-accordion-menu-widget-skin-005

手順6

ブラウザでスキンを適用したいWordPressブログのページを開き、ソースを開き、”jquery-vertical-accordion-menu/skin.php”の文字列を探します。

手順7

”jquery-vertical-accordion-menu/skin.php?widget_id=(数字)&skin=(スキン名)”の”(数字)”の部分を控えます。
jquery-vertical-accordion-menu/skin.php?widget_id=2&skin=black

手順8

”option.css”の”%ID%”の文字列を先程控えた”(数字)”に置換し保存します。

手順9

他のウィジェットにも適用する際は手順4手順8を繰り返します。

手順10

”jquery-vertical-accordion-menu”ディレクトリをFTPでWordPressの”plugins”ディレクトリにアップロードします。
jquery-accordion-menu-widget-skin-006

手順11

テーマの”functions.php”に以下の記述を追加します。
function adds_head() {
    echo "\n\t<link rel=\"stylesheet\" href=\"".dc_jqaccordion::get_plugin_directory()."/option.css\" type=\"text/css\" media=\"screen\"  />";
}
add_action('wp_head', 'adds_head');

ショートコードの場合

手順1

ショートコードを作成する際に追加要素として”id="(任意の数字)"”を付与します。

手順2

ウィジェットの場合と同様に任意のスキンのcssをまるごと”option.css”にコピーします。

手順3

”%ID%”を”s(任意の数字)”に置換します。(任意の数字)は手順1で設定したものです。

手順4

他のショートコードにも適用する際は手順1手順3を繰り返します。

手順5

ウィジェットの場合と同様にアップロードし、”functions.php”を編集します。

まとめ

この記事では悪戦苦闘しつつも編み出すことに成功した「JQuery Accordion Menu Widget」にスキンを適用した方法を紹介しました。

少々飛び飛びのような部分がある気がしますが、PCの基本操作ができればなんとかなる程度には書いたつもりです。

もし「JQuery Accordion Menu Widget」のスキンが反映されなかった場合、この記事のことを思い出してやってくれれば幸いです。

WordPressの長~いメニューをスッキリさせる方法

記事の概要

この記事では、「Lee Chestnutt」氏の「JQuery Accordion Menu Widget」を使用してWordpressの長~いメニューを伸縮させることでスッキリさせる方法について書きます。

「JQuery Accordion Menu Widget」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”JQuery Accordion Menu Widget”と入力します。
jquery-accordion-menu-widget-001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
jquery-accordion-menu-widget-002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「JQuery Accordion Menu Widget」の設置方法

ウィジェットに設置する方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”外観”をクリックします。
jquery-accordion-menu-widget-003

手順3

管理画面の左メニューの”ウィジェット”をクリックします。
jquery-accordion-menu-widget-004

手順4

”JQuery Accordion Menu”をウィジェットの任意の場所にドラッグ&ドロップします。
jquery-accordion-menu-widget-005

手順5

”JQuery Accordion Menu”の設定をします。
jquery-accordion-menu-widget-006

設定内容

設定内容
タイトル ウィジェットのタイトルを入力します。
メニューを選択 あらかじめ作成しておいたメニューを選択します。
Click/Hover クリックで開くか、カーソルを持っていくだけで開くかを選択します。
Auto Close Open Menus 開いているタブを別のところをクリックした時に閉じるか否かを選択します。
Save Menu State (uses cookies) 現在のメニューの状況をクッキーに保存するか否かを選択します。
Auto Expand Based on Current Page/Item 該当するページが開かれている場合メニューも該当する部分を開くか否かを選択します。
Disable Parent Links 親メニューのリンクを無効化するか否かを選択します。
Close Menu (hover only) カーソルを持っていくだけで開くようにした場合自動的にメニューを閉じるか否かを選択します。
Show Count 親メニューに子供以下に該当するメニューの数を表示するか否かを設定します。
Menu Class メニューに追加のクラスを与えます。
Disable Class メニューに設定されているクラスを無効化します。
Hover Delay カーソルを持っていってから何秒後に反応するかを設定します。
Animation Speed アニメーションのスピードを設定します。
Skin スキンを設定します。スキンの一覧は下表を御覧ください。

スキン一覧

スキン一覧
Blue Grey Demo
Clean Black Graphite

任意の場所にショートコードで設置する方法

メニューを作成し、下記ショートコードを使うことで設置できます。

また、オプション項目を追加することも可能です。

例:Auto Close Open MenusとAuto Expand Based on Current Page/Itemを有効にする場合

また、オプション項目を設定する方法は以下の通りです。

オプション項目の設定方法

オプション項目の設定方法
オプション項目 使用する変数
Click/Hover event click/hover(入力しない場合はclick)
Auto Close Open Menus auto_close true/false(入力しない場合はfalse)
Save Menu State (uses cookies) save true/false(入力しない場合はfalse)
Auto Expand Based on Current Page/Item expand true/false(入力しない場合はfalse)
Disable Parent Links disable true/false(入力しない場合はfalse)
Close Menu (hover only) close true/false(入力しない場合はfalse)
Show Count count true/false(入力しない場合はfalse)
Menu Class menu_class (入力しない場合はmenu)
Disable Class disable_class (入力しない場合はなし)
Hover Delay hover (入力しない場合は600ms)
Animation Speed animation slow/normal/fast (入力しない場合はslow)
Skin skin black/blue/clean/demo/graphite/grey (入力しない場合はスキンなし)

まとめ

この記事では、「Lee Chestnutt」氏の「JQuery Accordion Menu Widget」を使用してWordpressの長~いメニューを伸縮させることでスッキリさせる方法について書きました。

このプラグインを使えば長くてだらしのないメニューをアコーディオン形式にすることでスッキリとさせる事ができます。

長いメニューはだらしがないのでこの方法を使ってスッキリさせることをオススメします。

次回予告

実は昨日このプラグインのスキンを反映させるのに悪戦苦闘していたためブログの更新ができませんでした。

しかし、なんとか反映させることに成功したため、次回はその方法を紹介します。

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss