web-dev-qa-db-ja.com

HTML構造の変更とカスタムメニューの作成

私はかなりWordpressに不慣れで、非常に具体的なことをやろうとしています。私は現在 私のカスタムテーマを作成するために/ - 素晴らしいhtml5blank を使用しています。ナビゲーションタブにネイティブメニューを使用しています。私は現在、テキストの代わりにナビゲーションタブの画像を作成するためにbackground-imageを使用していますが、それは私がw/cssを達成しようとしていることとそれを反応させることに問題を引き起こしています。

<img>に<li>タグ（<li>ごとに異なる画像）をHTMLで追加できるようにしたいです。

私が見つけて読むことができた限りでは、私は私のfunction.phpファイルで見つけられたこの中にカスタム構造を作成する必要がありますか？

function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 0,
        'walker'          => ''
        )
    );
}

この質問をより意味のあるものにし、あなたが私を正しい軌道に乗せるのを助けるために私が提供する必要がある他のものを私に知らせてください。前もって感謝します。

menuscsshtml
1
RLM

カスタマイズの量を考えれば、最善の策はカスタムWalker機能を統合することです。 From コーデックス ：

より深い条件クラスのために、あなたはカスタムウォーカー関数（'walker' => new Your_Walker_Function引数で作成される）を使う必要があるでしょう。

新しいwalker関数を作成する最も簡単な方法は、\wp-includes\nav-menu-template.phpからデフォルトのクラス（Walker_Nav_Menu）をコピーして、必要なものをカスタマイズすることです。

カスタムのWalkerを使用すると、wp_nav_menu()関数ではそれ自体が許可されていないという、柔軟性と制御の幅が広がります。メニュー項目の出力を再フォーマットするだけでなく、メニュー作成プロセス中にあらゆる種類のコードを実行できるようになりました。

一言で言えば、あなたがしたいのですが：

  1. Walker_Nav_Menuクラスのコードをあなたのテーマのfunctions.phpファイルにコピーするか貼り付けてください。
  2. 一番上の行をclass My_HTML5Blank_Walker_Nav_Menu extends Walker_Nav_Menuのように編集します。
  3. 画像タグ参照を構築するためのすべての新しいコードをstart_el public関数に挿入します。
  4. 新しいカスタムWalkerを指すように、wp_nav_menuコードの最後の行、つまり'walker' => 'My_HTML5Blank_Walker_Nav_Menu'を変更します。

wayあなたがそれらの画像を統合することに決めるのはあなた次第です...しかし、これをチェックしてください：メニュー項目がポスト/ページ/カテゴリなどであるならばカスタムウォーカーを使用すると、各投稿/ページ/用語オブジェクトのメタデータを取得し、that）を使用してメニューの出力を変更できます（つまり、投稿のおすすめ画像を設定できます）。次に、カスタムWalkerを使用してその投稿のメタデータを取得し、関連するおすすめ画像のサムネイルを埋め込むことができます。）

とにかく、うまくいけば私はここで始めるためにあなたに十分に与えました。私が何かを見逃したかどうかを教えてください（または、あなたが私に片付けてほしいと思う何かが混乱している場合）。

1
Travis Seitler

ここで提供しているコードは、カスタムメニューを表示するように変更できます。

私のメニューのカスタム構造はこんな感じです：

<ul class="navigation">
    <li class="active">
        <a href="item1.html">Menu item 1</a>
    </li>
    <li>
        <a href="item2.html">Menu item 2</a>
    </li>

    <li>
        <a href="item3.html">Menu item 3</a>
        <div>
            <a href="subitem1.html">Sub Menu item 1</a>
            <a href="subitem2.html">Sub Menu item 2</a>
        </div>
    </li>

</ul>

それで、私のメニューを表示するためのそのようなカスタムレイアウトを構築するために、私は以下のコードを使いました：

<ul class="navigation">
<?php
$count = 0;
$submenu = false;

foreach( $menuitems as $item ) {
  $link = $item->url;
  $title = $item->title;
  // item does not have a parent so menu_item_parent equals 0 (false)
  if ( !$item->menu_item_parent ) {
      // save this id for later comparison with sub-menu items
      $parent_id = $item->ID;

      if ($getCurrenturl == $link) {
          $activeClass = 'active';
      } else {
          $activeClass = '';
      }
  ?>
      <li class="item <?php echo $activeClass; ?>">
          <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
  <?php 
  } 

  if ( $parent_id == $item->menu_item_parent ) {
      if ( !$submenu ) {
          $submenu = true; 
  ?>
      <div>
      <?php } ?>

              <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>

      <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?>
      </div>
  <?php 
      $submenu = false;  
      }
  }
  ?>

<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) { ?>
</li>                           
<?php 
  $submenu = false; 
} 
?>

<?php 
$count++; 
} 
?>

</ul>
0
Rahul Gupta