Q&A
ワードプレスについて質問させていただきます。
【現状】
・グローバルナビに「NEWS」「DISCOGRAPHY」など８つの項目あり
・うち２つの項目は２カラム構成（縦左半分に記事、縦右半分に月ごとのアーカイブ）
・今回あたらに「BLOG（固定ページ）」を作成し、メニューに追加
・「BLOG」ページを開いたときに、箇条書きのように縦に、「日付（空白）ブログタイトル」と並べていきたいだけなので、２カラムである必要は無いのですが、現状２カラム構成。なので今は、「カラム左側＝日付（空白）ブログタイトル」、「カラム右側＝空欄（背景色付き）」となっていて、カラム右側が邪魔な状態。
【直したい箇所】
・「BLOG」ページを１カラムにしたい。
（ 「カラム左側＝日付（空白）ブログタイトル」、「カラム右側＝空欄（背景色付き）」となっていている）
説明が下手でわかりづらいかと思いますが、
ご質問いただけますとお答えしますので
是非解決のヒントいただけると幸いです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
###確認事項
おそらく固定ページでしょうか？
カラムのデザインだけならCSSで大丈夫だと思います。
bodyタグのclassにそれぞれこうありませんか？
このようにbodyタグのclassには固定ページのスラッグが普通は出力されていますので。
html
1<body class="news"> 2</body> 3 4<body class="discography"> 5</body> 6 7<body class="blog"> 8</body>
###解決方法
上記確認事項がわかれば、あとはbodyの子階層でカラムのデザインを指定しているclassがあるので、次のようにCSSを指定すればいいと思います。
もちろん、カラムのデザインを指定しているclassが.mainかどうかはわかりませんから、そこは開発ツール（F12クリックで要素にホバーすると該当classがわかります）などで確認してみてください。
css
1body.news .main, 2body.discography .main { 3 display: flex; /* news と discography を横並び */ 4} 5body.blog .main{ 6 display: block; /* blog は普通 */ 7} 8 9/* 10少しわかりにくいですが、blogページだけ普通にしたいならこうでもOK 11body:not(.blog ) .main{ 12 display: flex; /* blog 以外は横並び */ 13} 14*/
もし、カラムのデザインだけでなく表示内容も分岐したい、ということでしたらis_age('news')などを使う必要があるので、その辺はまたお尋ねください。
###追記
すみません勘違いしていました。２カラムはきっとCSSでなくサイドバーで出力されていますよね？
上の確認事項と解決方法はスルーしてください。
やはりis_age('news')などで分岐する必要がありそうです。
おそらくすべて固定ページと思いますので、まずpage.phpのテンプレートファイルをご覧ください。
そこに「NEWS」「DISCOGRAPHY」「BLOG」のいずれの場合も出力される、共通のHTMLが書いてありませんか？
（page.phpに書いていなければpage.phpでget_template_partされて呼ばれているテンプレートファイルに書いてあると思います。）
その共通のHTMLが例えばこうだとします。
php
1<div class="wrapper"> 2 <div class="main" role="main"> 3 <!-- メインコンテンツ --> 4 <div> 5 <aside class="side"> 6 <!-- サイドコンテンツ --> 7 </aside> 8</div>
であれば、こうします。
php
1 2<div class="wrapper"> 3 4 <?php if ( is_page('news') || is_page('discography') ) : ?> 5 6 <div class="main" role="main"> 7 <!-- メインコンテンツ --> 8 <div> 9 <?php get_sidebar(); ?> 10 11 <?php elseif ( is_page('blog') ) : ?> 12 13 <div class="main" role="main"> 14 <!-- メインコンテンツ --> 15 <div> 16 17 <?php endif;> 18 19</div> 20
if ( is_page('news')というのはもしスラッグがnewsのページならという意味なので、これを使って表示内容を分岐してあげるわけです。
なので、上記の分岐をすると、それぞれ次のHTMLが出力されると思います。
html
1<div class="wrapper"> 2 <div class="main" role="main"> 3 <!-- メインコンテンツ --> 4 <div> 5 <aside class="side"> 6 <!-- サイドコンテンツ --> 7 </aside> 8</div>
html
1<div class="wrapper"> 2 <div class="main" role="main"> 3 <!-- メインコンテンツ --> 4 <div> 5</div>
投稿2020/06/22 15:24
編集2020/06/22 15:42
総合スコア26
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/22 15:51