ヘッダー画像の下に文字だけのカテゴリーメニューを追加したい



  • 申し訳ありません。
    下記画像の黄色部分に文字だけのカテゴリーメニューを追加したいです。
    現状のピックアップコンテンツだと文字だけの選択肢がないため、設定方法がわかりません。
    助けて頂ければ幸いです。
    0_1625750901748_無題.png


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • 横から失礼します。
    functions.phpに
    function menu_setup() {
    register_nav_menus(
    array(
    'm-custom'=>'カスタムメニュー',
    )
    );
    }
    add_action( 'after_setup_theme', 'menu_setup' );?>

    出力したいところへ
    画像から推測すると header.phpの 186行目と187行目に入れると出力されると思います。
    <?php wp_nav_menu( array(
    'theme_location' => 'm-custom',
    )); ?>
    入れた後管理画面 カスタム メニュー で カスタムメニューにチェックを入れて保存させると、 選んだメニューが出ます。

    header.php に入れたコードに
    'before' => '',
    'after' => '',
    'link_before' => '',
    'link_after' => '',
    'echo' => true,
    'depth' => 0,
    を追加すると まえ後ろにいろいろな飾りをいれられます。
    'menu_class' => 'menu',
    'menu_id' => '',
    'container' => 'div',
    'container_class' => 'div-class',
    'container_id' => 'div-id',
    のクラス ID を ジンのテーマで使用している クラス名にすると再現できますが、

    中級位の 実力が必要です。
    バックアップをしてから行ってください。



  • ご教示ありがとうございます。
    しかしながら、header.phpの所で書き込まれたコードを打ち込むと
    「うまくいかなかったようです」のエラーがでてしまいました・・・

    質問ばかりで申し訳ありませんが、どのようにすれば宜しいでしょうか?



  • 横から失礼します。
    キャッシュが残っている場合がありますね。
    キャッシュクリアしてためしてはどうでしょうか?
    また、クラスを入れないと 縦に現れて、よく見るリンクの状態で現れます。

    投稿ページのデフォルトのクラスを持ってくれば 早いかと思いますよ。

    あと。直線書いてもいいですが、FTPから行った方がいいです(サーバーに付いて
    るものや、ダウンロード品)



  • こんにちは。
    簡単ですが、コードを作りました。
    functios.phpに入れた後 header.phpに以下を入れてみてください。

    選ぶメニューの量によって縦にでてしまいますので、👉部分を変えてください。

    <?php wp_nav_menu( array(
            'theme_location' => 'm-custom',
    	'before' => ' ',
             'after' => '',
              'link_before' => '<div class="blog-card_cus-menu ">',
               'link_after' => '</div>',
               'echo' => true,
                'depth' => 0,
                'container' => 'div',
                 'container_class' => 'innerlink-box1-title_cus-menu',
                  )); ?>
    	<style>
    		li.menu-item.menu-item-type-custom.menu-item-object-custom{
    		width: calc(100% * 1 / 6 - 6px);  ☚ 6を メニューの数にかえる
    	          display: inline-block;
    	           text-align: center;
    	           margin-left: auto;
                  }
    		.innerlink-box1-title_cus-menu {
    		background-color: #ff7fa1; ☚
                    top: 133em;    ☚
                    padding: 5px 7px 5px 7px;
                    font-size: 12px;
                    font-weight: 500;
                   }
    	 .blog-card_cus-menu {
                   background: azure;
                    width: 90%;
                    margin: 10px auto;
                    padding: 20px
                   }
    		ul#menu-menu-2 {
                    display: inline-flex;
                    margin-top: 1em;
                    margin-bottom: 1em;
                    width: 100%;
                    min-width: 100%;
                    line-height: 0;
                    }
    		@media (max-width: 767px){
    		ul#menu-menu-2 {
    		overflow-x: auto;
                       white-space: nowrap;
    		   display: inline-flex;
    		    margin-top: 1em;
    		    margin-bottom: 1em;
    		    width: 100%;
    		    min-width: 100%;
    		     line-height: 0;
    		      }
    		li.menu-item.menu-item-type-custom.menu-item-object-custom {
    		 width: calc(20% + 30px);  ☚ 20%
                         display: inline-block;
    	                   text-align: center;
    	                    margin-left: auto;
    		                   }
    		  .innerlink-box1-title_cus-menu {
    	   overflow-x: auto;
    	            white-space: nowrap;
    		  width: auto;
                       background-color: #ff7fa1;  ☚
                       top: 133em;   ☚
                       padding: 5px 7px 5px 7px;
                       font-size: 12px;
                      font-weight: 500;
                       }
    	.blog-card_cus-menu {
    		background: azure;  ☚
    		 width: 100%;
    		 margin: 20px auto;
    		 padding: 20px
    		}
    		}
    							</style>
    


  • benkbook様
    わざわざ、コードを書いて頂きありがとうございます。
    header.phpにいれる箇所は一番下に入れれば宜しいのでしょうか?
    それとも前回、教えて下さった位置の186行目に入れればいいのでしょうか?


 

});