WordPress メニュー項目がクリックされないように設定する方法 - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

WordPress メニュー項目がクリックされないように設定する方法

Last Updated:2021年10月2日| 6のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPressで特定のメニュー項目がクリックされないようにしたい場合があります。 たとえば、次の映像のように、最上位のメニュー項目である「カテゴリー」の下に、個々のカテゴリーがサブメニュー項目に追加された場合、最上位のメニュー項目は、クリックしないように設定することができます。

この記事では、メニュー項目がクリックされないように設定して、マウスポインタカーソルの形を変える方法を説明します。

メニュー項目がクリックされないように作成する(メニュー項目をクリック不可)

まず、 WordPress サイトに管理者としてログインした後に ルックス>メニュー(또는 WordPress バージョンに応じて、 テーマのデザイン>メニュー)に移動し、編集するメニューを選択するようにします。

WordPress テーマのデザインメニューのページ

次に メニューを追加 (または メニューアイテムを追加)で「ユーザー定義リンク」を選択します。

WordPress メニュー - ユーザー定義のリンクを追加する

ユーザー定義のリンク項目のURLの部分に https:// 代わりに #を入力します。 「リンクテキスト」に適切なメニュー項目に表示されるフレーズを入力して、「メニューに追加」を押すようにします。 これにより、このメニュー項目は、クリックされていません。

URLフィールドは空白のままにすることができず、ポンド記号を使用するのが標準規約です。

※この記事を発行した後、 WordPressのハングルUI翻訳が一部変更されました。

メニュー項目にマウスを上げるときに、マウスポインタカーソルを削除する

上記の方法でメニュー項目を追加すると、メニュー項目をクリックすることができませんが、マウス「ポインター」にカーソルが表示されてリンクがあるメニュー項目のように見えることができます。 メニュー項目は、クリックがない項目であることを確実にするためにCSSを使用して、マウスポインタカーソルを削除することができます。

メニューページで、右上の「画面のオプション」をクリックします。

WordPress メニュー -  CSSクラスのフィールドを表示

詳細設定]メニューのプロパティを表示 下の CSSクラス 横のチェックボックスを選択します。 その後、個々のメニュー項目に「CSSクラス」フィールドが表示されます。

WordPress メニュー項目にマウスカーソルを変更する

追加したメニュー項目を選択して、CSSクラスのフィールドに適切なクラス名(例えば、 unclickable)を入力します。

最後に、次のCSSコードをテーマのスタイルシートファイルに追加します。

/* 메뉴 항목의 마우스 포인터 커서 모양 바꾸기 */
/* Remove the mouse pointer cursor on hover in WordPress */
.unclickable > a:hover {
  cursor: default;
}

これで、そのメニュー項目にマウスを置くと、手のひらの形のマウスポインタカーソルの代わりの基本のマウスカーソルが表示されます。

※ WordPressでのCSSコードを追加する方法は、「WordPressでのCSSを追加する」を参照してください。参考にテーマファイルを変更する場合は、 チャイルドテーマを作成し作業してください。 親テーマのCSSファイルを含めテーマファイルを直接編集する場合は、後日テーマが更新されると変更がすべて失われます。

メモ:



6のコメント

コメント

  1. こんにちは!
    もしユーザー設定リンクにサブメニューを入れたときにメニューを押すと自動的に最初のサブメニューに移動させることができますか?
    もちろん、最初のサブメニューのドメインを入力してください。

    応答
    • WordPressではそのような機能はありませんが、必ずしたい場合はjavascriptなどで実装が可能でしょう。 しかし、簡単に言われた方法ですれば良いのですが、あえて他の方法を動員する必要はないようです。

      応答
  2. 多くの助けを受けています。 ありがとうございます。
    何をしたいのか oceanWPでメニュー項目がクリックされないようにしましたが、まだクリックされて空白ページが開きます。 何が問題なのでしょうか?

    応答
    • 間違って適用したか、それともブラウザの問題ではないかと思われます。 Can I Useによると、Safariではcusor属性が機能しないという。

      https://caniuse.com/?search=cursor

      応答
  3. もしかしたら、メニューをクリック時にhover効果を維持する方法を知るのでしょうか?
    ランディングページを構成したhover効果が維持されません。

    特定のセクションとメニュー移動経路が一致したときにhoverされるようにしたいです。

    応答
    • こんにちは、オジョンミン様。

      おそらく「Page scroll to id」という次のプラグインが必要に応じて動作していないかと思いますね。

      https://wordpress.org/plugins/page-scroll-to-id/

      応答