こんにちは。
この記事は WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015 15日目の記事です。
Bootstrap対応のWordPressテーマを作成したときの黙示録です。
これからテーマを作成される方に少しでも参考になれば幸いです。
WordPressテーマを配布する目的でゼロから作成します。
Bootstrapのフォーマットに対応します。
グリッドレイアウトなど、テーマのテンプレートで自由に作成できる部分は簡単です。
問題は下記のように、WordPressが生成する部分のカスタマイズです。
カスタムメニュー wp_nav_menu で、
ul の class は、テンプレートタグオプションで指定できますが、li の class は指定できません。
functions.php で nav_menu_css_class をフックして class を指定します。
function my_special_nav_class( $classes, $item ) {
$classes[] = 'nav-item';
return $classes;
}
add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
comment_form は、デフォルトでは class が全く指定されていません。
フォーム要素を上書きして、ひとつずつ class を指定します。以下抜粋。
<?php comment_form( $args, $post_id ); ?>
‘,
‘fields’ => apply_filters( ‘comment_form_default_fields’, array(
‘email’ =>
‘
‘ .
( $req ? ‘*‘ : ” ) .
‘
‘
)
),
);
検索フォームは、functions.php で get_search_form をフックします。
‘;
return $form;
}
add_filter( ‘get_search_form’, ‘my_search_form’ );
パンくずリスト(breadcrumb)のテンプレートタグ get_category_parents もクセモノです。
下記のような Bootstrap フォーマットに整形したいのですが、まず li にできません。
区切る文字列に </li><li> と指定することで、なんとか li にできますが、最後の li が余分です。
最後の li を Page title の開始タグに利用するにしても、active class を指定できなくなります。
<ul class="breadcrumb">
<li><?php echo get_category_parents($cat[0]->term_id,TRUE,'</li><li>'); ?>
Page title</li>
</ul>
結局、php で無理やり最後の li を除去しました。
上記のようにフックすると、影響範囲が広いため問題が発生します。
例えば、カスタムメニューで、ヘッダーメニューだけドロップダウンにしたい場合。
nav_menu_css_class をフックしてドロップダウンの class をつけると、全てのカスタムメニューに反映されるため、
ウィジェットとしてサイドバーやフッターに配置したときも全てドロップダウンになってしまいます。
フックするときに条件分岐はできないので、
ウィジェットの .widget_nav_menu に対して css で調整します。
.widget_nav_menu .dropdown-item {
ドロップダウンを打ち消すstyleを指定
}
最後に、プラグインのBootstrap対応をどうするかという問題があります。
テーマ側の作業範囲ではないのですが、例えばプラグインのお問い合せフォームだけBootstrap非対応でデザインも違うのはちょっと残念です。
例えば、プラグイン「Contact Form 7」の場合、要素毎にclassを設定することができますが、
ユーザーに設定を強いるのは現実的ではありません。
テーマ側で対応するには、jQueryでclassを後付けするしかありません。
$('.wpcf7-form input[type="submit"]').addClass("btn btn-primary");
色々フックしたり、プラグイン対応まで考えると簡単ではないと感じました。
また、WordPressやプラグインの仕様変更によって正常に表示されなくなるリスクもあります。
引き続き効率の良い方法を検討していきたいと思います。
作成したテーマは配布していますのでよろしければ使ってみてください。
以上です!
明日は @mimosafa さんです。よろしくお願いします!