Q&A
この質問だと[WordPress]が質問タグとして必須では。
前提・実現したいこと
表題の点について質問したいです。
front-page.htmlの一部分のphp要素にcssを反映させたいのですが、できていません
設定方法をご教授頂けると幸いです。
発生している問題・エラーメッセージ
エラーメッセージ
試したこと
本を使って、調べました。
基礎的な部分だと思うので下記を確認しました
・cssの相対パスのphpテンプレートコード。→他の要素は反映されているので
大丈夫だと思います
表題の通り、php部分だけ、デザインよりも大きい点から、CSSで修正できないかと菅家ていますが、解決手段が見つかりませんでした
考えたこと
下記のようにclassを指定することで反映させることがあると思いましたが、毎回どのクラスにもつける必要があるのか、疑問でした。(本に載ってる外のサイトを見ましたが、そんなに多くしてませんでした。)
ご教授頂けると幸いです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5</head> 6<body> 7 <ul class="blog-list"> 8 <?php 9 $query_args = array( 10 'post_status'=> 'publish', 11 'post_type'=> 'post', 12 'posts_per_page'=>3 13 ); 14 $sub_query = new WP_Query( $query_args ); //$the queryで定義づけ 15 16 if($sub_query-> have_posts() ) : 17 // 記事が存在したとき 18 while ( $sub_query->have_posts() ): 19 $sub_query->the_post(); //ループのインクリメントの役割、これがないと無限ループになるので注意 20 $link = get_permalink($post->ID); //記事url 21 $ttl = get_the_title($post->ID); //記事タイトル 22 ?> 23 <li id="post-<?php the_ID(); ?>"> 24 <a href="%3C?php%20echo%20$link;?%3E"><img alt="<?php echo get_template_directory_uri(); ?>サンプル1" src="%3C?php%20echo%20get_template_directory_uri();%20?%3E/TOP/img/sample01.jpg"> 25 <div class="blog-txt"> 26 <?php the_category(); ?> 27 <p><?php echo $ttl;?></p><time class="time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time> 28 </div><!-- /.blog-txt --></a> 29 </li><!-- /.blog-item --> 30 <?php endwhile;else: 31 //記事が存在しなかった場合 32 33 echo '<div class="row">'; 34 echo '<dd><a href="/" style="pointer-events: none;">すみません。ただいま記事を準備中です。<br>少々お待ちください。</a></dd>'; 35 echo '</div>'; 36 endif; 37 wp_reset_query();//クエリをリセット 38 ?> 39 </ul><!-- /.blog-list --> 40</body> 41</html>
CSs
1 2.info .blog-list { 3 margin-right: 20px; 4} 5 6.info .blog-item { 7 -webkit-box-align: center; 8 -webkit-align-items: center; 9 -ms-flex-align: center; 10 align-items: center; 11} 12 13.info .blog-item a { 14 display: -webkit-box; 15 display: -webkit-flex; 16 display: -ms-flexbox; 17 display: flex; 18 -webkit-box-align: center; 19 -webkit-align-items: center; 20 -ms-flex-align: center; 21 align-items: center; 22 margin-top: 30px; 23} 24 25@media screen and (max-width: 700px) { 26 .info .blog-item a { 27 -webkit-box-orient: vertical; 28 -webkit-box-direction: normal; 29 -webkit-flex-direction: column; 30 -ms-flex-direction: column; 31 flex-direction: column; 32 white-space: nowrap; 33 margin-bottom: 4vw; 34 text-align: center; 35 } 36} 37 38.info .blog-item a img { 39 width: 150px; 40 height: 110px; 41 margin-right: 20px; 42} 43 44@media screen and (max-width: 700px) { 45 .info .blog-item a img { 46 width: 90%; 47 height: 40%; 48 padding: 10px; 49 } 50} 51 52.info .blog-item a .blog-txt { 53 text-decoration: underline; 54} 55 56.info .blog-item a .blog-txt:hover { 57 text-decoration: none; 58} 59 60.info .blog-item a .blog-txt p { 61 font-weight: bold; 62 line-height: 1.68; 63 text-align: left; 64 margin-bottom: 20px; 65} 66 67@media screen and (max-width: 700px) { 68 .info .blog-item a .blog-txt p { 69 display: block; 70 font-size: 4.0vw; 71 white-space: nowrap; 72 margin-top: 20px; 73 } 74} 75 76.info .blog-item a .blog-txt .time { 77 display: block; 78 margin-top: 20px; 79} 80 81@media screen and (max-width: 700px) { 82 .info .blog-item a .blog-txt .time { 83 display: block; 84 text-align: center; 85 } 86}
回答1件
0
下記のようにclassを指定することで反映させることがあると思いましたが、
毎回どのクラスにもつける必要があるのか、疑問でした。
(本に載ってる外のサイトを見ましたが、そんなに多くしてませんでした。)
正解は無いと思いますので、私の方針としては基本的にテーマ標準の
テンプレートのタグに沿ってスタイルを定義していきます。
一部のaタグにのみ適用したい、等テーマ標準に対応できない場合は
適宜classやidを付与します。
その場合でもテンプレートを直接修正するのではなく、the_content等のフックで対応します。
難しい場合や手を抜く場合は子テーマを作ってテンプレートを修正することもあります。
投稿2021/12/24 02:50
総合スコア2456
ご回答いただきありがとうございます。
ど素人すぎて、不安なので、質問させてください。
下記のサイトを見ました。
https://www.at-freak.jp/column/wordpress_css/
こちらのサイトのように、function.phpにwp_enqueue_styleを使って、
iDやclassを指定し、書いていく認識で間違えないでしょうか？
大変恐れ入りますが、追加でご教授頂けると幸いです。
>こちらのサイトのように、function.phpにwp_enqueue_styleを使って、
>iDやclassを指定し、書いていく認識で間違えないでしょうか？
この方法で対応できるレベル感のデザイン調整であれば大丈夫です。
テンプレートに手を入れる必要がある場合は子テーマの作成をご検討ください。
あなたの回答
tips
プレビュー
