wordpressのヘッダやフッタのグローバルメニューの修正

実現したいこと

wordpressのヘッダやフッタのグローバルメニューを2段にしたり、高さを修正したいのですが、うまくできません。
どのソースから修正するのが良いでしょうか。
基礎的なことかとは存じますが、御教示願います。

行動規範の内容に同意します

回答2件

ベストアンサー

phpテンプレートも触っていく必要があると思います…！
header.phpで、ヘッダーを作ってる箇所があると思いますが、そこの下に二段目の分をマークアップして、カスタムリンクを表示するクラスを付けて、そのクラスのスタイルをcssでつけていく形になると思います

少しだけ参考のコードと画像をおいていきますね
これはあくまでも例ですので、コードはそれぞれテンプレートによっても違うし、書いてあるのはhtmlのみなので、コピペしても動きませんが

genjyou.html
1<!---現状の構造--->
2<!DOCTYPE html>
3<html lang="ja">
4 <head>
5 <meta charset="utf-8">
6 <title>現状</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 </head>
9 <body>
10 <!----- header----->
11 <header>
12   <a href="">リンク</a>
13   <a href="">リンク</a>
14   <a href="">リンク</a>
15   <a href="">リンク</a>
16   <a href="">リンク</a>
17 </header>
18
19 </body>
20</html>

genjyou.css
1/* 現状のcss */
2header {
3  padding:10px;
4  background:red;
5  text-align: right;
6
7}
8header a{
9  color:white;/* 文字が見やすいようにしているだけです */
10}
11

mokuhyou.html
1<!--目標のhtml構造-->
2<!DOCTYPE html>
3<html lang="ja">
4 <head>
5 <meta charset="utf-8">
6 <title>目標</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 </head>
9 <body>
10 <!----- header----->
11 <header>
12   <!-----
13 headerのなかに、1段目と二段目のdiv等を作る
14ここではgreen-row、blue-rowとしている
15----->
16   <div class="green-row">
17     <a href="">リンク</a>
18     <a href="">リンク</a>
19     <a href="">リンク</a>
20     <a href="">リンク</a>
21     <a href="">リンク</a>
22   </div>
23   <div class="blue-row">
24     <a href="">リンク</a>
25     <a href="">リンク</a>
26     <a href="">リンク</a>
27   </div>
28 </header>
29
30 </body>
31</html>

mokuhyou.css
1/* 目標のcss */
2header {
3  padding:10px;
4  background:red;
5  text-align: right;
6}
7header div {
8  margin:10px;
9}
10header div.green-row {
11  background:green;
12}
13header div.blue-row {
14  background:blue;
15}
16header a{
17  color:white;
18}

軽く説明を入れると、

現状はヘッダーが一段ですね
ヘッダー（赤い部分）の中に、リンク（オレンジ）が並んでいます

目標の場合、
ヘッダー（赤）の中で、二段に分けたいので、divでも何でもいいですが、２つのグループに分けます（緑と青）
その中に、それぞれのリンク（オレンジ）が並ぶようにします

これをみてもちんぷんかんぷんな場合は、php・wordpressよりも先に、htmlとcssで目標の形を自力で作れるようになってから、phpのテンプレートタグを勉強して、進めていくとよいですよ
htmlの構造がわかるようになれば、あとはwordpressのループタグで、リンクやカスタムリンクをどうやってループ表示するか調べれば、答えは見つかると思います

応援してます、頑張ってください！

投稿2021/07/05 09:01

sofia

総合スコア14

grape_123

2021/07/06 02:06

ご丁寧にありがとうございました。最低限PHPのコードを読む程度は出来ますので、頂いた内容を基に試行錯誤してみたいと思います。 1つのメニューを途中から改行するモノとは違いますが、下記wordpress標準の関数も使用できそうでしたので、いろいろ試してみます。ありがとうございました。 register_nav_menu wp_nav_menu

行動規範の内容に同意します

デザインはcssから変更します
cssファイルはテーマによってファイル名が違いますので、探してみてください。

cssで作るメニューはコチラが参考になると思います
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/#dorop-multi

ちなみに高さはheight:●●px;等で指定してあります
ヘッダーやフッターのクラスを探して、高さ等を変更します。

もし初心者ならば、意図しない表示崩れ等が起こる可能性が高いですのでバックアップ等取ってからの作業をお勧めします

投稿2021/07/03 09:29

sofia

総合スコア14

grape_123

2021/07/04 06:52

cssの件承知いたしました。ありがとうございます。ドロップダウンではなく、初期状態で2行並んでいるようなメニューでもcssを使用するのがよろしいでしょうか。途中で改行されているようなイメージです。開発者ツール等でクラスを確認しつつ高さを変えてみたりもしているのですが、PHP側の指定があるのかどうかわかりませんがcssだけでは突破できない現状です。

sofia

2021/07/04 08:07

ドロップダウンでなくても、通常はデザインはcss、構造はheader.php,footer.phpなどから変更になるかと思いますが… 文章だけだは、どういう状態からどういう風にしたいのかわかりづらいですので、捕捉情報で画像等追加されると回答が付きやすくなるかと思います（ヘッダーやフッターのデザインは、テーマによっていろいろありますので）

grape_123

2021/07/05 02:46

勝手がわからず、失礼いたしました。画像を2点追加いたしました。現状は外観のメニューより設定した項目が横並びですべて表示される状態となっております。

行動規範の内容に同意します

あなたの回答