サポート » 使い方全般 » グローバルナビゲーションに「トップへ戻る」のボタンや検索フォームな

  • WordPress初心者です。

    テーマ「Twenty Eleven」をカスタマイズしています。

    グローバルナビゲーション(#access)に
    jQueryを使用したページ上部に戻るボタンや検索フォームなどを埋め込みたいのです。

    ①「トップへ戻る」ボタン
    jQueryではありませんが以下のように試してみました。

    メニューの管理画面で設置したカスタムリンクのURLに
    <a href="#page">Top</a>
    と入力。
    ・・・しかし、
    http://ahref=#pageBackToTop/a
    と変換されてしまって実装できません。

    ②検索フォーム
    カスタマイズ前にヘッダー部にあった検索フォームを
    positionプロパティでナビゲーション上に設置したのですが
    やはりスマートフォンなどで見ると大きくズレています。

    こちらもどうにかグローバルナビゲーションに埋め込みたいです。

    ——————————
    WordPress関数などを調べてもよくわからずに挫折しました。
    答えでなくてもよいので皆さんのお力をお貸しください!
    ご回答をよろしくお願いします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • こんにちは。

    ①の質問については、matsugeinuさんがtwenty elevenをどうカスタマイズされているのかが質問文には書かれていないので、見当違いの回答になるかもしれませんが、デフォルトのTwenty Elevenで考えるならば、グローバルメニューはページ全体のヘッダー内に配置されているので、下へスクロールすると見えなくなりますからボタンを設置しても押すことができません。ページ下部にグローバルメニューを表示させているのでしょうか?(もしかしてfixed?)

    メニューのURLについてですが、aタグはHTML内でリンクを貼る際に使用するものなので使い方が間違っています。
    カスタムリンクのURL欄には、#page と入力するのが正しいです。

    ②の質問については、テーマのheader.phpを編集し、検索フォームのコードを<nav>の最後に丸ごと移動して、style.cssで調整すれば良いです。

    以下で、デフォルトのtwenty elevenでは上手く表示されました。(twenty elevenの子テーマを利用)
    style.css追加部分

    #branding .with-image #searchform {
    	bottom: auto;
    }
    
    .one-column #branding #searchform {
    	right: auto;
    }
    
    #branding #searchform {
    	float: right;
    	position: relative;
    	top: auto;
    	right: auto;
    	margin: 5px 0;
    }
    
    @media (max-width: 650px) {
    	#branding #searchform {
    		top: auto !important;
    		margin-top: 3px 0;
    	}
    
    	input#s {
    		font-size: 13px;
    	}
    }

    細かい調整はご自身でどうぞ。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「グローバルナビゲーションに「トップへ戻る」のボタンや検索フォームな」には新たに返信することはできません。