研究者向けWebサイト制作、メディア運営の事業母体『Share Culture』開設

TIRU LABO「雑記LABO」のカスタマイズ ver 1.0

SHARE

「雑記LABO」として断続的・気ままに書いていたカテゴリーをWordpressのカスタム投稿を使って専用化させたページを作成。ざっくりとは下記の内容を「ver 1.0」としてカスタマイズしました。

  • 投稿記事の1カラム化
  • タイトル周りの調整
  • 記事コンテンツのフォント調整
  • 「雑記更新一覧」ボックスの作成
  • SNSボタンのカスタマイズ
  • 前の記事・次の記事の調整
  • フッターの消去とミニフッターの追加

使っているテーマは「SANGO」。テーマとしての完成度がとても高いのでいじりやすいようで、いじるのが難しいですが、やっぱりきれいに整えられるし整えようと思わせる良テーマ。人気テーマで使っている人も多いので、これから差別化できるようにカスタマイズしていこうと思っています。

MEMO
今回の記事は自分用の記録としてメモ用に残すものをやや解説もかねて紹介しているものになります。

カスタマイズ内容と方法

投稿記事の1カラム化

「SANGO」の個別投稿（一般的に使う更新用の投稿）は下記のような構造になっています。

<?php get_header(); ?>
　<div id="content"<?php column_class();?>>
　　<div id="inner-content" class="wrap cf">
　　　<main id="main" class="m-all t-2of3 d-5of7 cf">
　　　　//中略
　　　</main>
　　　<?php get_sidebar();?>
　　</div>
　</div>
<?php get_footer(); ?>

2段落目にphpコードで「column_class」とあるようにここで投稿記事作成欄のチェックの有無で2カラムか1カラムかを判定するようになっています。が、今回のカスタマイズでは1カラムだけで運用するのでここを「class=”one-column”」としました。

カスタム投稿では「zakki」というID名で新たに作成したので、作成するPHPファイル名は「single-zakki.php」となります。上記のコードで中略したSANGOのメインは下記のようになっているので、「header（タイトルまわり）」「content（本文まわり）」「footer（記事フッターまわり）」にわけて個別にPHPファイルを作成していきました。

<article id="entry" <?php post_class('cf'); ?>>
　<?php
　　get_template_part('parts/single/entry-header');//タイトルまわり
　　get_template_part('parts/single/entry-content');//本文まわり
　　get_template_part('parts/single/entry-footer');//記事フッターまわり
　　comments_template();//コメント
　　insert_json_ld();//構造化データ
　?>
</article>

上記のファイル構造では「parts→single→entry-〇〇」と階層が3つありますが、これはSANGOが丁寧に階層別に判別しやすくしてくれているものです。子テーマに新しいファイルを設けるので今回、僕は下記の3つのPHPファイルを設けることにしました。

  • タイトルまわり：entry-header-zakki.php
  • 本文まわり：entry-content-zakki.php
  • 記事フッターまわり：entry-footer-zakki.php

つまり、下記のように「single-zakki.php」を書いていることになります。

<article id="entry" <?php post_class('cf'); ?>>
　<?php
　　get_template_part('entry-header-zakki') ;//タイトルまわり
　　get_template_part('entry-content-zakki');//本文まわり
　　get_template_part('entry-footer-zakki');//記事フッターまわり
　　comments_template();//コメント
　　insert_json_ld();//構造化データ
　?>
</article>

タイトル周りの調整

SANGOの「entry-header」は、

  1. パンくず
  2. タイトル
  3. 日付
  4. アイキャッチ画像
  5. 本文
  6. シェアボタン

という構造になっているのですが、「雑記LABO」では本文にフォーカスを当てるようにしたかったので、「パンくず」「アイキャッチ画像」「シェアボタン」は消し、「タイトル」と「日付」を中央寄せにして、本文の文字サイズと太さを大きくしました。

<?php //記事タイトルまわりのテンプレート ?>
　<header id="zakki" class="article-header entry-header zakki-header">
　　<div class="entry-meta zakki-entry-meta vcard dfont">
　　　<?php if(!get_option('remove_pubdate')):?>
　　　　<time class="pubdate entry-time" datetime="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date('Y/m/d'); ?></time<?php if(get_the_modified_date('Ymd') > get_the_date('Ymd')): ?>
　　　　<time class="updated entry-time" datetime="<?php echo get_the_modified_date('Y-m-d'); ?>"><?php echo get_the_modified_date('Y/m/d'); ?></time>
　　　<?php endif; endif; ?>
  　</div>
　<h1 class="entry-title single-title slideIn"><?php the_title(); //タイトル?></h1>
</header>

headerタグに「id=”zakki”」と「class=”zalli-header”」を、metaタグに「zakki-entry-meta」を付けてあります。これでCSSをかけて調整。

/*コンテンツトップの色線*/
.one-column #main .zakki {
  border-top: solid 4px #8e949a;/*mainを対象にしているので厳密にはentry-zakki-header.phpではない*/
}
/*全体ヘッダー*/
.zakki-header {
　text-align: center;/*中央寄せ*/
}
/*日付下部の線*/
.nothumb .entry-meta:after, .nothumb .page-title:after {
　bottom: -15px;
　width: 75px;
　height: 4px;
　border-radius: 2px;
　background: #a5dbff;/*色*/
　right: 0;
  left: 0;
　margin: auto;
}

記事コンテンツのフォント調整

フォントサイズと太さの拡大＆リンクの色変更

「entry-content-zakki.php」のsectionタグに「id=”zakki”」と「class=”zakki-font”」を付け、自動で挿入される広告を消し、下記のCSSを書きました。

/*記事のフォント*/
.single .nothumb .zakki-font {
  font-size: 120%;
  font-weight: 500;
}
/*記事のリンク*/
.single .nothumb .zakki-font a {
　text-decoration: none;
　color: #0060be;
}
/*記事のリンクホバー*/
.single .nothumb .zakki-font a:hover{
　color: #36aaf7;/*投稿記事のもので通常、水色のものをホバーすると水色に*/
}

「雑記更新一覧」ボックスの作成

「entry-footer」は、

  1. シェアボタン
  2. フォローボックス
  3. カテゴリー一覧・タグ一覧
  4. CTA
  5. おすすめ記事
  6. 作者情報

といった構造にSANGOはなっています。カスタマイズでは、「フォローボックス」と「CTA」はテーマを利用したカスタマイズで設定していないので表示されておらず、「シェアボタン」の位置変更とカスタマイズに（後述）、「おすすめ記事」と「作者情報」の間に「雑記更新一覧」ボックスを設けました。

シンプルに「日付」と「タイトル」のみを抽出して表（dt・dd）を用いて整理して表示されるようにしています。

<div id="top-box" class="zakki-list-box">
　<div class="top-list-title"><i class="far fa-comment-dots"></i> 雑記更新一覧</div>
　　<?php
　　　$args = array(
     'post_type' => 'zakki', //ID
     'posts_per_page' => 5, //表示数
    ); ?>

　　<?php $my_query = new WP_Query( $args ); ?>
　　　<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
 　　　　<!-- ▽ ループ開始 ▽ -->
　　　　　<dl>
           <dt>
           　<span><?php the_time('Y/m/d'); ?></span> //日付
           </dt>
          <dd>
　　　　　　　<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> //タイトルとリンク
          </dd>
         </dl>
        <!-- △ ループ終了 △ -->
　　<?php endwhile; ?>
　　<?php wp_reset_postdata(); ?>

以下はCSS。トップページにもほぼ同様のものを設けているので「top-list-box」となってしまっています。下記以外にも細かくレスポンシブになるようにCSSをかけていますが、割愛。

.top-list-box {
  width: 100%;
}
.top-list-title {
　text-align: center;
　font-size: 1em;
　font-weight: bold;
}
#top-box dt {
　font-size: 17px;
　font-weight: bold;
　margin-bottom: 5px;
　padding-bottom: 5px;
　float: left;
　width: 100px;
　clear: both;
　color: #252525;
}
#top-box dd {
　margin-bottom: 5px;
　padding-bottom: 5px;
　border-bottom-width: 1px;
　border-bottom-style: dotted;
　border-bottom-color: #ccc;
　font-size: 17px;
　font-weight: bold;
　margin-bottom: 10px;
}
#top-box a {
　color: rgba(0, 0, 0, .4);
}
#top-box a:hover {
　color: rgba(0, 0, 0, 1);
　font-weight: bold;
　text-decoration: none;
　transition: .3s ease-in-out;
}

@media only screen and (max-width: 480px)
{
#top-box dd {
　padding-left: 90px;
}
#top-box dt {
　font-size: 15px;
　width: 85px;
　line-height: 1.4;
}
#top-box dd {
　font-size: 15px;
　margin-bottom: 10px;
　line-height: 1.4;
}
}

SNSボタンのカスタマイズ

SNSボタンは「Pocket」と「LINE」の位置を変えてます（割愛）。「雑記LABO」ではコンテンツ内容に焦点を当てたいので、鮮やかな「SNSボタン」をモノクロにしました。ただし、ホバーすると色がつくようになっています。なかなか好みのものにできて満足！

/*記事下部のSNSボタン*/
.sns-btn__item {
  width: 16.5%;
  margin: 0 0.5%;
}
.sns-margin {
　margin-top: 45px;
}
#zakki .sns-btn__item a {
　color: rgba(0, 0, 0, .4);
}
#zakki .sns-btn__item a:hover {
 box-shadow: none;
 text-decoration: none;
}
#zakki .sns-btn__item a:hover {
 box-shadow: none;
}

/*ホバー時の各SNSの色*/
#zakki .tw a:hover {color: #7dcdf7;}
#zakki .fb a:hover {color: #7c9dec;}
#zakki .hatebu a:hover { color: #7cb1ec;}
#zakki .pkt a:hover { color: #f99593;}
#zakki .line a:hover { color: #8ed97a;}

#zakki .scc { color: rgba(0, 0, 0, .4);}

SANGOの「Library→functions→entry-functions」の中に「SNSボタン」のコードがあります。親テーマからコピペして子テーマのfunctions.phpに記述し、「div id=”zakki” class=”sns-btn sns-margin」の部分を「id=”zakki” class=”sns-btn sns-margin（php；中略）」とすることで上記のCSSのid「#zakki」がかかるようになっています。

前の記事・次の記事の調整

「前の記事・次の記事」はなくてもいいかなと思いつつ、一応残してあります。簡単にCSSをかけて、リンク文字の大きさや太さ等を調整しました。

/*前の記事・次の記事*/
.prev-next__text {
　font-size: .95em;
　line-height: 1.5;
　font-weight: bold;
　color: rgba(0, 0, 0, .4);
　padding: 15px;
}
.prev-next__text:hover {
　color: rgba(0, 0, 0, 1);
　transition: .3s ease-in-out;
}

フッターの消去とミニフッターの追加

SANGOには「ウィジェット」からフッターコンテンツを簡単に追加できるようになっていて、通常の投稿では「Twitter」や「人気記事」「新着記事」を挿入していましたが、やや目障りなのでその部分をまるまるカットしてあります。既存の「footer.php」からコピーしてつくった「footer-zakki.php」から該当箇所を削っただけです。

ミニフッターはサイドバーにも使っている「ブログ紹介ボックス」と「Twitter」だけ二列で挿入しました。「entry-footer-zakki.php」だと記事内に挿入されてしまうので、「single-zakki.php」ファイルの「article」と「footer」の間に下記のコードを挿入しています。

<div class="one-column-footer">
　<div class="shtb2 tbrsp">
　　<div class="cell">
　　　<div class="widget">
　　　　<div class="yourprofile">
　　　　　<p class="profile-background pf-bg-one-column"><img src="BG画像URL"></p>
　　　　　<p class="profile-zakki-img"><img src="画像URL"></p>
	 <p class="yourname dfont">TIRU LABO</p>
　　　　</div>
　　　　<div class="profile-content">
	　<p>紹介文</p>
　　　　</div>
　　　　<div align="center"><div class="pf-widget-btntext"><a class="btntext strong  accent-c" href="https://www.turetiru.com/about/">ABOUT</a><a class="btntext strong" href="https://www.turetiru.com/profile/">PROFILE</a>
　	<a class="btntext strong main-c" href="https://www.turetiru.com/work-list/">WORK</a>
　　　　</div></div>
　　　　</div>
　　　</div>
　　<div class="cell">
　　　<a class="twitter-timeline" href="https://twitter.com/ture_tiru?ref_src=twsrc%5Etfw" data-height="600" data-theme="dark" data-link-color="#2B7BB9">Tweets by ture_tiru</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
　　</div>
　</div>
</div>

おわりに

ざっくりと「雑記LABO」をカスタマイズした内容をまとめました。レスポンシブを調整したCSSなど、突っ込んで書いていない部分もありますが、ちょっと面倒なので今回はこの辺にて！

前の記事

Chrome拡張機能『FireShot』でWebページの全画面…

次の記事

WordPress無料テーマ「Portfolio」の導入＆PH…