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

  • ウ

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

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

    0

  • 横から失礼します。
    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 を　ジンのテーマで使用している　クラス名にすると再現できますが、

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

    1
  • ウ

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

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

    0

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

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

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

    0

  • こんにちは。
    簡単ですが、コードを作りました。
    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>
    0
  • ウ

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

    0