WordPressの自作テーマをアップデートしました（2020年8月）
- Aug 22, 2020
- Aug 22, 2020
- WordPress
こんにちは。前回の投稿から一ヶ月ちょっと経ちましたが、この間に少しずつ自作テーマのテコ入れを行ってきまして、ようやく完成形に至りましたので公開することにしました。私の中ではバージョン5.0となるメジャーアップデートです（笑）今回はそのアップデートの詳細を個人的な備忘録も兼ねてご紹介したいと思います。少し長くなると思いますが、興味ある方はどうぞ最後までお付き合いください（笑）
advertisement
全体の概要
今回のアップデートでは、ベースのデザインはこれまでのものを踏襲しつつ、細部までこだわって作り直すことを大きなテーマとしてきました。ただ漠然とコピペしたコードを使用するのではなく、自分なりにきちんと理解した上で使用することをまず一番に心がけました。
今回のバージョンアップに際してこれまでにコピペしていたHTMLやCSS、jQuery等のコードを改めて見直してみると、ちゃんと理解もせずに使っているものや、逆に使わなくてもいいもの、または余計なものが混在していることに気付きました。この辺のモヤモヤを一網打尽にすることがまずは今回の最大のミッションでした。その上で新しい機能を取り入れたり、他のサイトを参考にしたデザインにするといった作業を行ってきました。以下より各ページごとにポイントをまとめていきたいと思います。
トップページ
まずはトップページ（index.php）から。トップページはこれまでと同様にFlexboxを使って3カラム×6段構成で1ページに18記事を並べるカード型のデザインとしました。これがブログのデザインとしては個人的に（今のところ）No.1だと思ってます。理由は見やすくて一度に目にする記事数が多いから。視認性に優れているのでブログには最適なデザインだと思います。
コーディングについては以下の記事を参考に修正しました。
参考までに該当箇所のコードをご紹介します。まずはindex.phpです。
<?php get_header(); ?>
<main>
<div class="main_container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="post">
<figure class="post_thumbnail"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a></figure>
<div class="post_container">
<h2 class="post_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<ul class="post_info">
<li class="post_date"><?php echo get_post_time('M j, Y'); ?></li>
<li class="post_category"><?php the_category(' '); ?></li>
</ul>
</div>
</article>
<?php endwhile; endif; ?>
</div>
</main>
<?php get_footer(); ?>続いてCSSのFlexboxを使用した箇所です。
.main_container {
display: flex;
margin: 0 auto;
padding-top: 128px;
max-width: 1264px;
flex-wrap: wrap;
}
.post {
margin: 0 32px 32px 0;
width: calc((100% - 32px * 2) / 3);
}
.post:nth-child(3n) {
margin-right: 0;
}.postに指定したmarginとwidthで指定したcalcがポイントです。今回初めてちゃんとcalcについて知りましたけどとても便利ですね。%とpxなど異なる単位間の計算も行ってくれますので調子に乗って多用してます。
グローバルナビ、検索
画面右上の三本線アイコン（ハンバーガーアイコン）をクリックまたはタップすると、全画面でグローバルナビが表示されるようにしました。スマートフォン版ではよく見かける三本線アイコンですが、最近はPC版でも多く見かけるようになりましたので当ブログでもこれを採用しました。理由はシンプルだから。先ほどの視認性にも関連しますが、トップページではできるだけ記事の方に目を向けて欲しいので、ナビはアイコンだけのシンプルなデザインとしました。また、後述しますが同じ理由で検索もアイコンだけとしてキーワード入力は全画面で行うようにしています。
ハンバーガーアイコン
以前にもご紹介しましたが、改めて。ハンバーガーアイコン部分のコードは以下のようになっています。
<button class="navi_toggle">
<span></span>
<span></span>
<span></span>
</button>何だかんだこのコードが見た目も三本線ぽいので視覚的にも理解しやすいし扱いやすいと感じています。あとはナビボタンなのでbuttonを使っています。CSSは以下の通りです。
.navi_toggle {
position: absolute;
top: 32px;
right: 32px;
width: 32px;
height: 32px;
}
.navi_toggle span {
position: absolute;
width: 32px;
height: 2px;
border-radius: 4px;
background: #000;
transition: top .4s ease-in-out, background .4s ease-in-out, transform .4s ease-in-out;
}
.navi_toggle span:nth-of-type(1) {
top: 7px;
}
.navi_toggle span:nth-of-type(2) {
top: 15px;
}
.navi_toggle span:nth-of-type(3) {
top: 23px;
}ここまでが通常時の表示に関するスタイルですが、jQueryにて.navi_toggleをクリックするとbodyにnavi_activeというクラス名を付与するようにしていて、ナビボタンをクリックした際にボタンが変化するようCSSでスタイリングしています。
.navi_active .navi_toggle span:nth-of-type(1) {
top: 15px;
background: #fff;
transform: rotate(45deg);
}
.navi_active .navi_toggle span:nth-of-type(2) {
background: transparent;
}
.navi_active .navi_toggle span:nth-of-type(3) {
top: 15px;
background: #fff;
transform: rotate(135deg);
}ナビボタンをクリックするとspanの一番目（一番上のライン）と三番目をtransform: rotateで傾けて二番目はbackground: transparent;で透明にします。この時、.navi_toggle spanで指定した以下の箇所にて
transition: top .4s ease-in-out, background .4s ease-in-out, transform .4s ease-in-out;transitionをかけてゆっくりとふわっと変化するようにしています。今回このtransitionについてもきちんと理解することができました。
検索アイコン
今回、検索アイコンについては有名どころのFont Awesomeではなくそこから派生したLine Awesomeというアイコンフォントを使用しました。
簡単に言うとFont Awesomeのアイコンを細いラインで作り直したものという感じでしょうか。Font Awesomeで何となくボテッとした印象だったアイコンがすっきりとしてシャープな感じになっていますので、検索アイコンだけでなく他の箇所にも使用しています。
<button class="search_toggle">
<span></span>
<span></span>
</button>検索アイコン部分のコードもナビボタンとほぼ同じような感じにしていますが、まず検索アイコン部分には疑似要素の::beforeを使ってLine Awesomeのアイコンを表示しています。
.search_toggle::before {
content: '\f002';
font-weight: 900;
font-size: 28px;
font-family: 'Line Awesome Free';
transition: opacity .4s ease-in-out, color .4s ease-in-out;
}Line AwesomeのCSSでの使い方はFont Awesomeとほぼ同じなのでとても扱いやすく移行しやすいと思います。検索アイコン部分でこだわった点としては次のspan部分なんですが、通常時の表示では検索アイコンの後ろに隠しておいて（見えなくしている）、クリックするとスルッと現れるような仕様にしました。該当する箇所のCSSは以下の通りです。
.search_toggle span {
position: absolute;
top: 15px;
width: 32px;
height: 2px;
border-radius: 4px;
background: #000;
opacity: 0;
transition: background .4s ease-in-out, opacity .4s ease-in-out, transform .4s ease-in-out;
}通常時にはopacity: 0;で見えないようにしていますが、
.search_active .search_toggle span {
background: #fff;
opacity: 1;
}
.search_active .search_toggle span:nth-of-type(1) {
transform: rotate(45deg);
}
.search_active .search_toggle span:nth-of-type(2) {
transform: rotate(135deg);
}こちらもjQueryで検索アイコンをクリックするとbodyにsearch_activeというクラスを付与するようにして、opacity: 1;で表示するようにしています。その他ではハンバーガーアイコンと同じようにそれぞれのラインを傾けてバツ印になるようにしています。実際の挙動については各種ボタンをクリックまたはタップして確認してみてください。
全画面オーバーレイ
続いてはハンバーガーアイコン、検索アイコンをクリックした際に表示される黒背景の全画面についてご紹介します。それぞれのクラス名は分かりやすくnavi_overlayやsearch_overlayとしました。
.navi_overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 90;
background: #000;
opacity: 0;
transition: opacity .4s ease-in-out;
pointer-events: none;
}
.search_overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 90;
background: #000;
opacity: 0;
transition: opacity .4s ease-in-out;
pointer-events: none;
}どっちも同じなので両方載せる意味はないんですが（笑）ポイントとしてはposition: fixed;で絶対配置とし、top、right、bottom、leftを全て0にすることで全画面になる点です。また、通常時はopacity: 0;で非表示としていますが、ここでのポイントはpointer-events: none;です。この指定がないとopacity: 0;で非表示にしてもクリックなどの操作はできますので、それを無効にするスタイル指定です。
.navi_active .navi_overlay {
opacity: 1;
pointer-events: all;
}
.search_active .search_overlay {
opacity: 1;
pointer-events: all;
}それぞれ検索時の全画面、ナビの全画面がアクティブ状態の時にはopacity: 1;で見える（表示される）ようにしてpointer-events: all;でクリック操作などを有効にします。
こちらの記事が大変参考になりました。理解できれば何てことはないシンプルな構成ですが、やっぱりただ単純にコピペして問題なく動いたらそのまま使っていたころと比べると格段に理解度が増して扱いやすくなりました。今後のカスタマイズも自由自在になるかと思います（笑）あ、それと全画面表示の際に少しだけハマってしまったz-indexについては以下の記事がとても参考になりましたのでご紹介します。
このうち「4. 子要素のz-indexレベルを制限する親要素」に該当していたので上手く動作してくれてませんでしたが、これを読んで何とか解消することができました。
リストの先頭にアイコンを使用する
続いてはちょっと細かい部分のカスタマイズです。例えばリストの先頭にアイコンを表示したいといった時に何も対策をしなかったらアイコンとリンク文字のバランスが崩れることがありますが、これをきれいに表示する方法です。
当ブログのトップページでは各記事タイトルの下に投稿日とカテゴリーを横並びに表示している箇所です。
<ul class="post_info">
<li class="post_date"><?php echo get_post_time('M j, Y'); ?></li>
<li class="post_category"><?php the_category(' '); ?></li>
</ul>コードは単純でulを使ったリスト形式にしています。細かいところは省略しますが、
.post_info li {
position: relative;
padding-left: 28px;
font-size: 14px;
line-height: 24px;
}
.post_date::before {
position: absolute;
left: 0;
content: '\f133';
font-weight: 900;
font-size: 24px;
font-family: 'Line Awesome Free';
}.post_info liにposition: relative;を指定し、.post_date::beforeにてposition: absolute;とleft: 0;を指定します。また、リスト自体のline-heightとアイコンのfont-sizeを同じにすることでアイコンとリンクの文字が上下中央のバランスよく配置されるようになります。
アイキャッチ画像
トップページと個別投稿ページの関連する記事一覧で表示したアイキャッチ画像には:hoverにてホバー時に背景がふわっと暗くなるように指定しています。
今回新たに知ったのがfilterプロパティですが、簡単な画像の加工ならこれで十分です。
.post_thumbnail a img {
transition: filter .4s ease-in-out;
}
.post_thumbnail a:hover img {
filter: brightness(70%);
}お決まりのtransitionでふわっとさせてfilterで明るさが70%になるようなスタイルです。とても手軽に実装できるのでお勧めです。
個別投稿ページ
次は個別投稿ページ（single.php）です。こちらも全体的にはこれまでのデザインを踏襲するようにして、横幅を最大800pxまでとしています。
ページ全体について
個別投稿ページの全体についてですが、以下の記事を参考にして各段落間やボックス間はmargin-topで余白を取るように修正しました。
これまではmargin-bottomで余白を指定して:last-childでmargin-bottom: 0;にして余白を打ち消す方法でした。まだまだ上手く使えていないとは思いますが、今回のアップデートでほぼほぼmargin-bottomは駆逐してやりました（笑）
記事タイトル部分
これまでは最初にアイキャッチ画像を配置してその下に記事タイトルと投稿日等を表示していましたが、これを逆にして一番上に記事タイトル等、次にアイキャッチ画像を配置しました。画面遷移した際にまず目に入るものを記事タイトルにした方が分かりやすいかなと考えたのでこのような配置にしました。また、細かい点ですが、トップページでは記事投稿日、カテゴリーのみの表示でしたが、個別投稿ページではこれに加えて記事更新日も表示しています（PC版のみ）。過去記事のリライトは割とよく行うので、昔書いた記事もちゃんと更新してますよというアピールです（笑）
SNSボタン
各種SNSへのシェアボタンですが、今は亡きGoogle+ボタンが付いていたので削除、ついでにLINEも削除してこれまでの6つから4つに変更しました。
<?php
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
?>
<div class="sns_button">
<div class="twitter"><a href="<?php echo esc_url( 'https://twitter.com/share?url=' . $url_encode . '&text=' . $title_encode ); ?>" target="_blank" title="Twitterでシェア"><span>Twitter</span></a></div>
<div class="facebook"><a href="<?php echo esc_url( 'https://www.facebook.com/share.php?u=' . $url_encode ); ?>" target="_blank" title="Facebookでシェア"><span>Facebook</span></a></div>
<div class="pocket"><a href="<?php echo esc_url( 'https://getpocket.com/edit?url=' . $url_encode . '&title=' . $title_encode ); ?>" target="_blank" title="Pocketに保存"><span>Pocket</span></a></div>
<div class="hatena"><a href="<?php echo esc_url( 'https://b.hatena.ne.jp/add?mode=confirm&url=' . $url_encode ); ?>" target="_blank" title="はてブに保存"><span>はてなブックマーク</span></a></div>
</div>コードもシンプルなものに見直しました。
.sns_button div {
width: calc((100% - 4px * 3) / 4);
text-align: center;
}各ボタンの横幅指定にcalcを使いました。これまでは自分で計算して%指定していましたが、calcを使うとこれが不要になり便利ですね。ただ、ボタンが4つになった分間延びした感じのボタンになりましたのでデザインは見直した方がいいかなと考え中です。
内部リンク及び外部リンク
基本的には大きな変更はないんですが、これも細かい点ですがボックスの影を修正しました。
古い書き方だとボックス全体にボヤっとした影が付くのに対して、新しい書き方ではボックスの下側にいい感じに影が付きますね（笑）
.internal_link {
border: 1px solid #e5e5e5;
box-shadow: 0 24px 16px -16px rgba(0, 0, 0, .15);
}一部抜粋していますが当ブログでの該当箇所のスタイルです。rgba(0, 0, 0, .15)の箇所で影の色と透明度の指定ができます。その他box-shadowプロパティの値を変更することでお好みの大きさや色の影を付けることができます。
関連する記事
個別投稿ページの最下部には関連する記事（RELATED POSTS）として同じカテゴリーの記事をランダムで10記事表示していましたが、これをトップページと同じデザインのカード型に変更しました。やはり一覧性や視認性にはこちらのレイアウトの方が優れていると思います。表示される記事数は1つ減りましたがまぁ問題ないでしょう（笑）
スマートフォン版
今回のアップデートでは主にトップページと個別投稿ページの改善が主だったんですが、スマートフォン版の改善にも力を入れました。ただ、現段階ではまだ自分の中でブレイクポイントの確立ができてないので端末によっては見づらいと思います。まぁそれは今後見直すとして、まずは手持ちのiPhone8できれいに表示されることをメインにカスタマイズしました。
トップページ
はじめにトップページから。
よく見かけるデザインだと思いますが、意外とこのよく見かけるデザインを実装するのは簡単じゃないと思いました。それぞれのサイトで見た目は同じでも実装方法が異なっているのが当たり前だし、その中で自分のサイトに置き換えたときにどんな実装にしようかということは今回すごく考えました。結果は同じでも過程が違う。そういうことです（笑）とにかくスマートフォン版のデザインは見やすいことが第一優先だと考え、ヘッダーは固定、ブログ名の左右に検索ボタンとハンバーガーアイコンを設置、ページ全体はシングルカラムの構成としました。ちなみにヘッダーの背景はうっすらと透過させています。PC版でもそうですが、ヘッダー固定にするとその分だけコンテンツ領域が狭くなり視認性に欠けるというデメリットが生じます。ただ、ナビや検索ボタンは常にページ上に表示されているのでアクセスしやすい。この両方を解決するためにヘッダーを透過しました。何となくよくなった気がします（笑）
検索画面
ちょっと参考までに検索画面をご紹介します。
少し見づらいかもしれませんが、スマートフォン版では検索画面を開いた際にテキストフィールドにフォーカスが当たらないようになっています。
こちらの記事に賛同しましたのでこのような形にしました。
個別投稿ページ
次に個別投稿ページです。PC版と同じようにまず最初に記事タイトルが表示されるように変更しました。
記事タイトル周りの程よい余白がいい感じです（自画自賛）
最下部の関連する記事一覧ですが、こちらはトップページと同様のデザインにしています。
最後に
まだまだ他にも参考にしたブログはたくさんありますが、今回はこの辺にしときます（笑）これまでは他のサイト様からコピペして自サイトで問題なければ深く理解もせずにそのまま使っていましたが、自分なりにちゃんと理解してから使うことを意識していくとかなり勉強になり、また、今後も繰り返し使える自分の知識として定着するということが分かりました。ちなみに、今回のブログデザインでインスピレーションを強く受けたブログが以下です。
ほぼパクったと言われてもいいぐらいヘッダーは同じです。逆に言うと今回のアップデートは、このサイトを見つけてしまって心底惚れてしまったので何とか近づきたいというリスペクトから生まれたものなのでパクったと言われた方がより近づけたということなのでむしろ嬉しいですけどね（笑）
advertisement
