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

0

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

ワードプレスでは、特定のメニュー項目がクリックされないように設定するには、メニュー項目をユーザー定義リンク」に追加して、「URL」に「#」を入力します。 そして、単純なCSSコードを使用して、マウスポインタの形も変更することができます。

投稿者 Word Creater 12月月曜日、9、2019

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

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

まず、ワードプレスのサイトに管理者としてログインした後に テーマのデザイン>メニューに移動し、編集するメニューを選択するようにします。

ワードプレステーマのデザインメニューのページ

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

ワードプレスのメニュー - ユーザー定義のリンクを追加する

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

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

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

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

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

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

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

ワードプレスのメニュー項目にマウスカーソルを変更する

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

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

/ *メニュー項目のマウスポインタカーソルの形を変更する* / / * Remove the mouse pointer cursor on hover in WordPress * / .unclickable> a:hover {cursor:default; }

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

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

注:

コメントを残す

コメントを入力してください!
名前を入力してください