当ブログで行なっているSimplicity2のカスタマイズについてお問い合わせがありましたため、まとめました。

PHPやCSSを理解している方向けです。
実施する場合はご自身の責任で、必ずバックアップを行なった上で作業してください

ゴール

Simplicityは わいひら さんが無償で公開されている素晴らしいWordPressテーマです。

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ
https://wp-simplicity.com/

当記事は、Simplicity2を改造し「エントリーカードをそれぞれ独立した1つのブロックにする」がゴールです。

完成イメージ。

環境

  • PHP 5.5.9 (Cloud 9)
  • WordPress 4.x系
  • Simplicity 2.5(安定板 simplicity2.5.0e1.zip)
  • 子テーマ、無印(simplicity2-child20161002a.zip)

カスタマイズ概要

Simplicityのデフォルト表示

Simplicity デフォルト状態を確認しておきましょう。

各ブログ記事には「サムネイル、タイトル、サマリー」が表示されます。
そして、各ブログ記事は、大きな枠線に囲まれています。

上の画像に対し、ボックスに色をつけるとこうなります。

Chrome デベロッパーツールを利用すれば上のようなDOMツリーの状態を素早くチェックできます。
画面上でスタイルの変更も簡単にチェックでき、こういったカスタマイズを行う際に重宝します。

今回のカスタマイズで行うこと

  • 1.外枠を消去する
  • 2.各ブログ記事に枠線を表示する
  • 3.アイキャッチ画像をタイトル下に移動する

カスタマイズ手順

事前に行うWordPress設定

  • Simplicity2, 子テーマをアップロードする
  • 子テーマを有効化する
  • テーマのカスタマイズより、「レイアウト(全体・リスト)」の「一覧リストのスタイル」が「エントリーカード(デフォルト)」であることを確認する

いつでもデフォルトに戻すことができるよう、カスタマイズは子テーマに対して実施することを推奨します!

entry-card.phpの追加

「3.アイキャッチ画像をタイトル下に移動する」対応のため、子テーマにPHPファイルを追加します。

ディレクトリ構造は次のようになっています。

親テーマsimplicity2よりentry-card.phpを探し出して、子テーマsimplicity2-childにコピーします。

これはWordPress上から操作できないと思いますので、FTPソフトなどを利用してください。

entry-card.phpの編集

WordPressの管理ツールにログインし、「外観 > テーマの編集」を選択し、テーマの編集画面へ遷移します。

右上のテーマ選択より[Simplicity2 child]に切り替え、entry-card.phpをクリックします。

画面が切り替わったら、入力欄のPHPスクリプトを次に置き換え[ファイルを更新]してください。

<?php //投稿一覧リストのループ内で呼び出されるエントリーカード ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('entry cf'.(is_list_style_large_thumb_cards() ? ' entry-large-thumbnail' : '').(is_list_style_tile_thumb_cards() ? ' entry-tile' : '').( is_entry_card_style() ? ' entry-card' : '')) ?>>

<div class="entry-card-content">
  <header>
    <h2><a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <p class="post-meta">
      <?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
      <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span>
      <?php endif; //is_create_date_visible?>

      <?php get_template_part('category-link');//カテゴリーリンク?>

      <?php //インデクスにタグを表示したい場合コメントアウト
      //the_tags( '<span class="tag"><span class="fa fa-tags fa-fw"></span>', ', ', '</span>'); ?>

    </p><!-- /.post-meta -->
    <?php get_template_part('admin-pv');//管理者のみにPV表示?>
  </header>

  <figure class="entry-thumb">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>
      <?php else: // サムネイルを持っていない ?>
        <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a>
      <?php endif; ?>
  </figure><!-- /.entry-thumb -->

  <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>

  <?php if ( get_theme_text_read_entry() ): //「記事を読む」のようなテキストが設定されている時 ?>
  <footer>
    <p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
  </footer>
  <?php endif; ?>
</div><!-- /.entry-card-content -->
</article>

この状態でブログトップを開くと次の表示となりました。

、、、表示が右に寄っていますね。
次からこれを修正します。

この手順で行なったこと。

初期状態ではphpファイルの取り扱い情報が次のように分かれています。

  • entry-card – articleタグとサムネイル
  • entry-card-content – タイトル、メタ情報、サマリ

つまり「サムネイルより先にタイトルを出す」ことが簡単にはできない状態でレイアウトが固定されていたため、entry-card.phpに全てをまとめることでレイアウトを任意に変更しております。

CSS編集

先の崩れてしまったレイアウトの修正、及び「1.外枠を消去する」「2.各ブログ記事に枠線を表示する」ため、CSSに手を加えます。

「テーマの編集」画面の右にあるファイル一覧から、style.cssをクリック。

画面が切り替わったら、入力欄に次のCSSファイルを追記し、[ファイルを更新]してください。

#main {
  border: none;
  margin-bottom: 0px;
  padding: 0px;
}
#main .entry {
  clear:both;
  margin-bottom:30px;
  margin-right:10px;
  padding: 18px 24px 24px 24px;
  width: 94%;
  border:1px solid #ddd;
  background-color:#fff;
  border-radius: 5px;
  overflow: auto;
  zoom: 1;
}
#main .entry h2 {
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.entry-card-content {
  margin: 0px;
}

CSS変更後、次の表示となりました。

完成イメージに近づきましたね。

注意! 他のページにも影響が

カスタマイズ実施後、記事ページを開いてみると、、、

Oh! なんですかこれは!!


今回のカスタマイズでは.entry-cardにborderを設定しております。
これが、もともと定義されていた#mainのborder設定と喧嘩してしまうため、#main側にborder:noneを定義し枠線を非表示としました。

しかしながら、#mainのスタイルはほぼ全てのページで利用されており、影響範囲が広いのです。

結果、一覧ページだけではなく、単一の記事ページ、固定ページにも影響して枠線を消してしまいました。

上の画像のように、背景が白単色であれば良いのですが、背景に画像を当てているような場合はかなりカッコ悪くなってしまうと思います。

この記事では単一ページ、固定ページのカスタムは取り扱いません。
恐れ入りますが、適宜スタイルを設定してください。

リストページの枠線だけ消去できればよかったのですが、タグの組み立て方が #main > #listという構成のため、やむなくこういった形にいたしまいた。

ブラウザキャッシュについて

おまけです。

Chromeをご利用の場合、CSSが強力にキャッシュされます。
style.cssを編集後にスタイルが反映されない場合はブラウザのキャッシュ削除をお試しください。

キャッシュ削除は手間ですから、次のカスタマイズもどうぞ。

[Simplicity]CSSを更新したのにすぐ反映されない場合の対処法
「CSSを更新したのにすぐに反映されない」というのはWebデザイナさんなら一度は経験されていると思います。 当ブログで利用して...

おわりに

ちょっと難しいカスタマイズも、時間をかけてソースを読み込めばなんとかなるものです。

ちょっと難しいと感じた方はWord PressコースもあるTechAcademy [テックアカデミー]など活用し、ベースの知識を学ぶことをおすすめします。

楽し開発ライフを送ってください!

この記事はtomita@atuwebがお届けしました。


コメントの入力は終了しました。