05: WordPress – オリジナルのテンプレートの作成 – 3カラムレイアウト

2018.11.18
3カラムのテンプレートに、WordPrsses の記事を表示する部分を実装します

次のような機能を実現します。一部、プラグインを使うところは、後日実装します。

  • ヘッダー
    • タイトル
    • パンくずリスト用のエリア
  • 左サイドバー
    • カレンダーアーカイブ用のエリア
    • 最新記事
    • 月間アーカイブ
  • 右サイドバー
    • プロフィールを書くエリア
    • カテゴリ
  • 中央
    • ブログの記事
  • フッター
    • Copyright

ブログ記事一覧 index.php

どこから作成しようとかと思いましたが、本丸から攻めます。

index.php

基本的な構造は、こちら(http://ikubo.jp/tech/web-html5-tag/)に書いている構造にしてあります。

別記事で書いている schema.org の metadata を入れてあります。(http://ikubo.jp/tech/web-schema-org/)

<?php get_header(); ?>
  <main id="wrap-container" role="main" class="container">
    <div class="row">
      <div id="sub-col-left" class="col-10 col-md-2 order-3 order-md-0">
        <div class="sub-col-inner">
          <?php get_sidebar('left'); ?>
        </div>
      </div> <!-- sub-col -->
      <div id="main-col" class=" col-sm-7 col-md-6 order-1">
        <div id="main-col-inner">
          <?php if( have_posts() ): ?>
            <div class="entry-list">
            <?php while( have_posts() ): the_post(); ?>
              <article id="post-<?php the_ID(); ?>" <?php post_class('entry'); ?> itemscope itemtype="http://schema.org/BlogPosting">
                <header class="entry-header">
                  <div class="entry-meta-datetime-updated">
                    <time itemprop="datePublished" datetime="<?php the_time('Y-m-d'); ?>"> <?php the_time('Y年n月j日 G:i' ); ?></time>
                  </div>
                  <a href="<?php the_permalink(); ?>">
                    <h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
                  </a>
                </header>
                <div class="entry-body">
                  <div class="entry-content" itemprop="articleBody">
                    <?php the_content(); ?>
                  </div>
                </div>
                <footer class="entry-footer">
                  <div class="entry-meta">
                    <?php
                        $term_name='';
                        $categories = get_the_terms($post->ID,'category');
                        $separator = ' ';
                        $output = '';
                        if ( $categories ) {
                          foreach( $categories as $category ) {
                      	      $output .= $category->name . $separator;
                          }
                          $term_name = trim( $output, $separator );
                        }
                    ?>
                    <div class="entry-meta-category">
                      Category: <span itemprop="keywords"><?php echo $term_name;?></span>
                    </div>
                  </div>
                </footer>
              </article>
            <?php endwhile; ?>
            </div>
          <?php else: ?>
            <section class="not-found">
              <p>ページが見つかりません。</p>
            </section>
          <?php endif; ?>
          
        </div> <!-- main-col-innner -->
      </div> <!-- main-col -->
      <div id="sub-col-right" class="col-sm-3 col-md-2 order-2">
        <div class="sub-col-inner">
          <?php get_sidebar('right'); ?>
        </div>
      </div> <!-- sub-col -->
    </div> <!-- /.row -->
  </main>
<?php get_footer(); ?>
  • 13行目の while で記事取得のルールを回します。一度にとれる記事の数は、設定–> 表示設定 で設定した数が上限です。
  • 19行目で、個別記事のリンクを作成しています。
  • 20行目で、タイトルを表示
  • 25行目で、記事本文を表示。ここは the_content() の代わりに the_excerpt() を使うと要約を出力できます。記事を複数ページで表示するような設定を使う場合、もう少し記述が必要です。当面はこれでいきます。

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <?php wp_head(); ?>
  <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ).'/css/app.css?ver=0.1.1'; ?>">
</head>

<body <?php body_class(); ?>>
<div id="wrapper">
  <header id="header" class="header">
    <!-- デバッグ用の領域 -->
    <div id="debugHeader" style="display:block;">
    </div>

    <!-- タイトル部分。後からカスタム投稿タイプ移動用のアイコンを置く予定 -->
    <div id="headerBlock1">
      <div class="container">
        <div class="row">
          <div class="blog-name col-10 col-sm-5">
            <h2>Project Artemis</h2>
          </div>
        </div>
      </div>
    </div>

    <!-- パンくずリスト用の領域 -->
    <div id="headerBlock2">
      <div class="container">
        <div class="row">
          <div class="col-10 col-md-2"> <!-- main-col の位置にパンくずリストを配置するための位置調整 -->
          </div>
          <div class="col-10 col-md-6">
            <div class="breadcrumbs">
              <ul><li>Home > Blog</li></ul> <!-- とりあえず、固定文字列 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

コメントで書いている通りです。パンくずリストの表示位置を調整するためにBoostrap の grid を追加してあります。

sidebar-left.php

<div id="sidebar-left" class="sidebar">
    <div class="side-contents">
      <h2>カレンダー</h2>
      <div class="side-menu-text">
      <p>設置予定</p>
      </div>
    </div>
    <div class="side-contents">
      <h2>最新記事</h2>
      <div class="side-menu-text">
        <ul>
          <?php wp_get_archives(array( 'type' => 'postbypost', 'limit' => 12)); ?>
        </ul>
      </div>
    </div>
    <div class="side-contents">
      <h2>月別アーカイブ</h2>
      <div class="side-menu-text">
        <ul>
          <?php wp_get_archives(array('show_post_count'=>true)); ?>
        </ul>
      </div>
    </div>
</div>

sidebar-right.php

<div id="sidebar-right" class="sidebar">
    <div class="side-contents">
      <h2>Profile</h2>
      <div class="side-menu-text">
      <p>設置予定</p>
      </div>
    </div>
    <div id="term_list" class="side-contents">
      <h2>カテゴリ</h2>
      <div class="side-menu-text">
        <ul>
        <?php
          $term_type ='category';
          $terms = get_terms($term_type);
          foreach ($terms as $term) {
            echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
          }
        ?>
        </ul>
      </div>
    </div>
</div>

css/app.css

@charset 'UTF-8';
/* サイト スタイル */

body {
  background: #fff;
  color: #333;
  font-family: Meiryo, 'Lucida Grande', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
p {
  margin-bottom: 8px;
}
a {
  color: #0056B3;
}


.sidebar {
  background: #fff;
}


/*
 *
 */
#wrap-container, #headerBlock1 .container, #headerBlock2 .container {
  max-width: 980px;
}

#main-col, #sub-col-left, #sub-col-right {
  padding: 0px;
  margin: 0;
}

.sub-col-inner {
  border: 1px solid #aaa;
  margin-bottom: 20px;
}

/* 768(md) 以上で左メニューを左に出す */
@media (min-width: 768px) {
  #sub-col-left {
    padding-left: 10px;
  }
}
/* 576(sm) 以上で右メニューを右に出す */
@media (min-width: 576px) {
  #sub-col-right {
    padding-right: 10px;
  }
}

#header ul {
  list-style-type:none;
  padding: 10px;
}
#header li {
  padding: 0 5px;
}

#footer {
  background: #343a40;
  padding-top: 10px;
  font-size: 12px;
  color: #aaa;
  height: 60px;
  text-align: center;
}

img {
  border: 1px solid #ccc;
}

#headerBlock1 {
  color: #fff;
  background: #343a40;
}
#headerBlock1 .blog-name {
  padding: 8px 10px 10px 16px;
  line-height: 1.2;
  font-weight: bold;
}

#headerBlock2 {
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

#header ul {
  margin: 0;
  padding: 0;
/*  display: flex; */
  list-style-type:none;
}


.side-contents h2 {
  color: #fff;
  background: #343a40;
  margin: 0;
  padding: 5px;
  font-size: 14px;
}
.side-contents p {
  color: #666;
  padding: 10px;
  font-size: 14px;
}

.side-contents ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.side-contents ul li {
  margin-left: 12px;
  padding: 0;
  font-size: 14px;
}

/*
 * 記事
 */
.entry {
  margin: 0 10px 10px;
  padding: 5px 20px 10px;
  background: #fff;
  border: 1px solid #aaa;
  -webkit-border-radius:10px;
}
/* 更新日時 */
.entry .entry-meta-datetime-updated {
  text-align: right;
  font-size: 12px;
  color: #aaa;
}
.entry .entry-meta-datetime {
  text-align: right;
  font-size: 12px;
  color: #aaa;
}
.entry .entry-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #aaa;
}

詳細はあとで追記予定