この記事は約 3 分で読めます ( 約 1683 文字 )

記事の概要

数日前に「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」のスキンが反映されなかった場合、この記事のことを思い出してやってくれれば幸いです。