2023年7月13日
Bootstrap対応のWordPressテーマ作成が簡単じゃなかった件
こんにちは。
この記事は WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015 15日目の記事です。
Bootstrap対応のWordPressテーマを作成したときの黙示録です。
これからテーマを作成される方に少しでも参考になれば幸いです。
テーマ作成について
WordPressテーマを配布する目的でゼロから作成します。
Bootstrapのフォーマットに対応します。
- WordPress 4.2+
- 使用ライブラリ：jQuery、Bootstrap 4 alpha
Bootstrap class名の指定（前編）
Grid
グリッドレイアウトなど、テーマのテンプレートで自由に作成できる部分は簡単です。
問題は下記のように、WordPressが生成する部分のカスタマイズです。
Navbar
カスタムメニュー 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 );
Forms
コメントフォーム
comment_form は、デフォルトでは class が全く指定されていません。
フォーム要素を上書きして、ひとつずつ class を指定します。以下抜粋。
<?php comment_form( $args, $post_id ); ?>
検索フォーム
検索フォームは、functions.php で get_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 を除去しました。
Bootstrap class名の指定（中編）
上記のようにフックすると、影響範囲が広いため問題が発生します。
例えば、カスタムメニューで、ヘッダーメニューだけドロップダウンにしたい場合。
nav_menu_css_class をフックしてドロップダウンの class をつけると、全てのカスタムメニューに反映されるため、
ウィジェットとしてサイドバーやフッターに配置したときも全てドロップダウンになってしまいます。
フックするときに条件分岐はできないので、
ウィジェットの .widget_nav_menu に対して css で調整します。
.widget_nav_menu .dropdown-item {
ドロップダウンを打ち消すstyleを指定
}
Bootstrap class名の指定（後編）
最後に、プラグインのBootstrap対応をどうするかという問題があります。
テーマ側の作業範囲ではないのですが、例えばプラグインのお問い合せフォームだけBootstrap非対応でデザインも違うのはちょっと残念です。
例えば、プラグイン「Contact Form 7」の場合、要素毎にclassを設定することができますが、
ユーザーに設定を強いるのは現実的ではありません。
テーマ側で対応するには、jQueryでclassを後付けするしかありません。
$('.wpcf7-form input[type="submit"]').addClass("btn btn-primary");
まとめ
色々フックしたり、プラグイン対応まで考えると簡単ではないと感じました。
また、WordPressやプラグインの仕様変更によって正常に表示されなくなるリスクもあります。
引き続き効率の良い方法を検討していきたいと思います。
作成したテーマは配布していますのでよろしければ使ってみてください。
以上です！
明日は @mimosafa さんです。よろしくお願いします！
SNSでフォローする
関連記事
