最近利用しているWordPressのテンプレートの書き方

Pocket

WordPressで最近使用しているスタイル規則。

page.php

<?php get_header(); ?>
<div class="container">
    <div class="content row">
        <div class="side col-lg-3">
            <?php get_sidebar(); ?>
        </div><!-- .side -->
        <div class="main col-lg-9 ">
            <div class="static-page">
                <div class="static-page__title">
                    <h1><?php single_post_title(); ?></h1>
                </div><!-- .static-page__title -->
                <div class="static-page__body">
                    <?php if( have_posts() ) : while( have_posts() ) : the_post() ?>
                        <div <?php post_class( 'static-post clearfix' ); ?>>
                            <div class="static-post__body">
                                <?php the_content(); ?>
                            </div><!-- .static-post__body -->
                        </div><!-- .static-post -->
                    <?php endwhile;endif; ?>
                </div><!-- .static-page__body -->
            </div><!-- .static-page -->
        </div><!-- .main -->
    </div><!-- .content -->
</div><!-- .container -->
<?php get_footer(); ?>

css

クラスsome-pageクラスでページ全体のスタイル指定する。

  • static-page 固定ページ
  • single-page 単一ページ
  • category-page カテゴリー
  • front-page フロントページ

/* -------------------------------------------------------------------
 # 固定ページレイアウト static-page
------------------------------------------------------------------- */
 .static-page {
   .static-page__title {
     /* スタイル */
   }
   .static-page__body {
     /* スタイル *?
   }
 }

クラスsome-postで各投稿のスタイルを指定。

  • static-post 固定ページ投稿
  • single-post 単一ページ投稿
  • category-post カテゴリー投稿
  • front-post フロントページ投稿

/* -------------------------------------------------------------------
 # 固定ページ投稿スタイル static-post
------------------------------------------------------------------- */
 .static-post {
   /* 固定ページ投稿のスタイル */
 }

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。