質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

解決済

WP twentyseventeen 上部にfixするナビゲーションの上部にロゴや、別のカスタムメニューを出したい

YuriY
YuriY

総合スコア33

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1回答

-1評価

0クリップ

278閲覧

投稿2017/11/02 04:01

標準のtwentyseventeenのテンプレートの場合、
ヘッダー部は

ロゴ
グローバルナビゲーション

の順に表示されますが、下部へスクロールするとロゴがきえてしまい、
グローバルナビゲーションのみ上部に残る仕様になっています。

これを、ロゴ部分からグローバルナビゲーションまで上部にfixedで表示したいです。

/wp-content/themes/twentyseventeen-child/template-parts/navigation/navigation-top.php

<?php /** * Displays top navigation * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.2 */ ?> <!-- <?php the_custom_logo(); ?> --> <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>"> <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"> <?php echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) ); echo twentyseventeen_get_svg( array( 'icon' => 'close' ) ); _e( 'Menu', 'twentyseventeen' ); ?> </button> a <?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu', ) ); ?> <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?> <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a> <?php endif; ?> </nav><!-- #site-navigation -->

ソース上にaとだけ記述した場合は、スクロール成功するのですが

あの部分を<?php the_custom_logo(); ?>にすると、
fixed自体が機能せず、すべてがスクロールしてしまいます。

正常に機能するときは、

<div class="navigation-top site-navigation-fixed"> …省略 </div>

失敗しているときは

<div class="navigation-top"> …省略 </div>

とclassの付与に失敗しているところまでは分かったのですが、どこで処理しているのかが見つけられません。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。