2022/02/16 (更新日: 2022/02/18)

WordPress自作テーマの初期設定とカスタムメニューのulとliの設定

Web制作

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'; /*管理画面用の独自ｃｓｓ*/
  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,
    )
    );
    ?>

上記のように書くと自動的に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代の僕が学習してきたことです。
何を勉強したら良いかわからない方はどうぞ。

ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】

• Tweet
• facebook
• hatebu
• LINE
• Read Later