WordPress自作テーマの初期設定とカスタムメニューのulとliの設定
もくじ
WordPress自作テーマの初期設定とカスタムメニューのulとliの設定
こんにちはふるぽんです。
今日は自作テーマ(HTMLのwordpress化)を作るにあたり、カスタムメニューの自動的に出力される
ulタグやliタグのクラスのおかげでスタイルが崩れまくったので、
初期の設定も含めて健忘録として書きます。
WordPress自作テーマの初期設定
index.phpやstyle.cssのファイルを揃えて最低限の準備が出来た状態が前提です。
まずはテーマ内のCSSやJavascriptを読み込みます。
このenqueue〜を「エンクエクエ〜」とボソボソ言いながらいつも書いています笑
以下をfunctions.phpに記述します。
function wpro_scripts(){
wp_enqueue_style('wpro-style',get_stylesheet_uri(),array(),'1.0.0','all');
wp_enqueue_script('wpro-script',get_template_directory_uri().'/js/main.js',array(),'1.0.0',true);
}
add_action('wp_enqueue_scripts','wpro_scripts');
get_template_directory_uri().’/js/main.js’,array(),のjsのファイルはご自身の環境に合わせて設定してくださいね。
get_stylesheet_uri()は単純にスタイルシートまでのパスを取得するんですが、上記で上手くいかない時は、
get_template_directory_uri().’/css/style.css’などファイルまでのパスを明記してみてください。
次はテーマ自体の初期設定です。
既存テーマを使うときに当たり前にある、アイキャッチ画像やメニューのカスタムなどなどです。
add_theme_suportは上のエンクエクエ〜同様、最初ni
何も考えずにただただ記述してます。
function wpro_setup(){
add_theme_support('title-tag'); /*head内タイトルタグ出力(独自に記述する際は削除*/
add_theme_support('post-thumbnails' ); /*アイキャッチ画像を利用*/
add_theme_support( 'wp-block-styles'); /*ブロックエティター用の基本CSS読み込み*/
add_theme_support('align-wide'); /*全幅と幅広への利用*/
add_theme_support('editor-styles'); /*管理画面ブロックエディター用css*/
$editor_stylesheet_path = './css/style-editor.css'; /*管理画面用の独自css*/
add_theme_support($editor_stylesheet_path);
/*カスタムメニューの追加*/
register_nav_menus(
array(
'primary' => 'メインナビゲーション',
));
}
add_action('after_setup_theme','wpro_setup');
上記以外にもテキストのフォントサイズをブロックエディターからできるようにしたり色々あるので、
wpの関数リファレンスから調べてみてください
カスタムメニューの設定
この後管理画面から、カスタムメニューを設定できるように、元々HTMLで記述したメニューの箇所の代わりに以下を記述します。
説明が難しいですね笑。
元々のHTMLコードはこんな感じです。
<nav class="p-header__nav p-header-nav">
<ul class="p-header-nav__items">
<li class="p-header-nav__item"><a href="index.html">ホーム</a></li>
<li class="p-header-nav__item"><a href="news.html">お知らせ</a></li>
<li class="p-header-nav__item"><a href="archive.html">ブログ</a></li>
<li class="p-header-nav__item"><a href="price.html">コース・料金</a></li>
</ul>
</nav>
上記のコードのnavタグ内のliタグのところに以下を記述します。
<nav class="p-header__nav p-header-nav">
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'menu-wrapper',
'container_class' => 'primary-menu-container,
'fallback' => false,
)
);
?>
‘container_class’ => ‘primary-menu-container’, 自動的に出力されるulタグを囲むdivタグのclass名
私の場合は、ulタグの外にdivタグをつけてスタイルが崩れるのが嫌なので、
‘container’ => false,
として、divタグはつけないようにしています。
上記のように書くと自動的にclass名が付与されず制御出来ます。
‘menu_class’ => ‘(ここに’元々のulタグのclass),
HTMLからwordpress化する場合は元々ulタグがあると思います。
元々のulタグを使いたい場合は、以下をfunctions.phpに記述してulタグが自動的に出力されること自体をストップします。
function remove_ul ( $menu ){
return preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu );
}
add_filter( 'wp_nav_menu', 'remove_ul' );
liタグに任意のclass名をつけたいとき
wp_nav_menuはul,liタグ共に自動的にclassが付与されます。
ulタグに関しては上記の通り制御出来ます。
liタグに関しては違うやり方で2つあります。
管理画面からcssを設定する
以下の画像のように、「外観」→「メニュー」から「表示オプション」を選択します。
クリックすると見やすくなります
「CSSクラス」にチェックを入れて、任意のCSSを設定していきます。
クリックすると見やすくなります
functions.phpから設定する
functions.phpに以下を記述して直接classを設定していきます。
function addMenuClass( $classes ) {
$classes = array(
'p-header-nav__item',
);
return $classes;
}
add_filter( 'nav_menu_css_class', 'addMenuClass', 10, 2 );
ソースコードを確認すると以下のように無事に指定したクラス名が反映されています。
クリックすると見やすくなります
カスタムメニューはid,classともに自動で色々と出力されるので、自分なりに制御していきましょう!
Web制作の学習でつまずきそうなら、DM頂けましたら僕にできることはお手伝い&助言いたします。
とは言え、まだまだ未熟者ですので、一緒に頑張りましょう。
以下は40代の僕が学習してきたことです。
何を勉強したら良いかわからない方はどうぞ。
40代からはじめる副業!プログラミング学習してWebサイト制作で月10万稼ぐ方法 – ふるぽんブログ
44歳の僕でも独学でプログラミング学習をはじめて、初案件から半年で、100万円以上売り上げました。 40代の方はもちろん、それ以外の方のお役に立てればと思います。Web制作は再現性が高く、副業に最適かとおもいます。40代以上のWeb制作で月10万稼ぐまでのステップアップとプログラミング学習の心得を解説していきます。
さばかんブログ - ビットコインなどの仮想通貨とNFT、おすすめの副業などの情報を発信
仮想通貨(暗号資産)初心者のあれこれを発信します。仮想通貨を勉強したい方、これからビットコインなどを始めたい方への記事を、初心者にも分かりやすく解説していきます。
ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】