WordPressテーマUnderStrapのカスタマイズ例

WordPress⇐2019年7月19日
UnderStrap CSS カスタマイズ
関連記事
Class Ad
Easy Table of Contents

目次

使わないと損をする最強海外FXキャッシュバックサイトTariTali
最強キャッシュバックサイトTariTali
Taritaliは1lotにつき最大9ドル還元
損切りやゼロカットをしても資金が残ります

WordPressテーマUnderStrap

当サイトでは、Twitterなどで使われているCSSのフレームワークBootstrapを内蔵しているテーマUnderStrapを使っています。

ブログ運営にあたってカスタマイズした点を記事にまとめたので参考になる箇所があればご自由に利用してください。

Bootstrap4のCSSにほとんど手を付けていないUnderStrapのCSSをカスタマイズする

UnderStrap CSS カスタマイズ

日本人の感覚からするとBootstrap4の標準のmarginやpaddingの取り方はやや寸詰まりに感じます。

見栄えを改善するために導入したCSSを記載します。

子テーマのstyle.cssをunderstrap-childが読み込むようにする

https://github.com/understrap/understrap-child

understrap-childは子テーマ直下のstyle.cssを読み込まないと言う大胆な設定になっているので、style.cssを読み込ませるにはfunctions.phpに以下の記述をする必要があります。

if (!is_admin()) {
    $the_theme = wp_get_theme();
    wp_enqueue_style( 'child-understrap-custom-styles', get_stylesheet_directory_uri() . '/style.css', [], $the_theme->get( 'Version' ) );
}

記事一覧ページの記事同士が近すぎるのを修正

body:not(.single) article:nth-child(n+2) {
    margin-top: 3rem;
    border-top: .2rem solid lightgray;
    padding-top: 1rem;
}

記事一覧ページも個別記事ページもHTML構成はほぼ同じですが、bodyタグのclassが異なります。

上記のCSSでは『クラス名singleを含まないbodyタグ』の下にある『2個目以降のarticle』のmargin-topを空けると言う指定をしました。

Bootstrap系は基本的にremと言うフォントサイズ単位でmarginやpaddingを指定するようにしましょう。

投稿日時などのメタ表示と記事タイトルが近すぎるのを修正

.entry-meta {
    margin: 1rem;	
}

日本人の感覚からすると近すぎるように感じるので修正します。

その他色々と細々した修正をしていますが、当然のことながら当ブログのCSSの再利用はご自由にどうぞ。

記事一覧のアイキャッチ画像を小さくし、記事個別ページではアイキャッチ画像を非表示にする

UnderStrap 記事一覧 アイキャッチ画像 縮小 01

英語圏のテーマに多い気がしますが、さすがにアイキャッチ画像サイズが大きすぎるのでCSSで修正します。

記事一覧ページのアイキャッチ画像のサイズを修正

body:not(.single) .entry-header ~ img.wp-post-image {
    max-width: 200px;
    max-height: 150px;
    object-fit: cover;
}

記事一覧ページも個別記事ページもHTMLはほぼ同じですが、bodyタグのclassが異なります。

上記のCSS指定で『クラス名singleを含まないbodyタグ』の下にあるアイキャッチ画像のサイズを変更しました。

object-fitは画像の縦横比をいい感じに調整してくれる属性です。

個別記事ページの先頭に表示されるアイキャッチ画像を非表示にする

body.single .entry-header ~ img.wp-post-image {
    display: none !important;
}

個別記事ページでも記事一覧ページと同じようにアイキャッチ画像が先頭に表示されますが、ほとんどの場合アイキャッチ画像は本文に含まれるのでくどいですね。

上記CSSで『クラス名singleを含むbodyタグ』の下にあるアイキャッチ画像を非表示にすると言う指定をします。

投稿日時を日本語にしてカテゴリーと更新日時を表示する

UnderStrap 投稿日時 変更

英語圏のテーマとしては特別悪いと言うこともないのですが、UnderStrapの初期状態の投稿日時表示はさすがにシンプルすぎます。

Font Awesomeのアイコンを使用してカテゴリーと投稿日時、更新日時を表示して少し見栄えを良くしました。

Font Awesomeアイコンでカテゴリーと投稿日時、更新日時を表示

https://github.com/understrap/understrap-child

UnderStrapは子テーマの使用を推奨しているので、子テーマのfunctions.phpに以下の記述をします。

add_filter('understrap_posted_on', 'mypostedon');

function postedOn() {
    $posted_on = sprintf('<time datetime="%s"><i class="fa fa-calendar pl-2 pr-1"></i>%s</time>', get_the_date('c'), esc_attr(get_the_date()));
    if (get_the_modified_date('Ymd') !== get_the_date('Ymd')) {
        $posted_on = sprintf('<time datetime="%s"><i class="fa fa-refresh pl-2 pr-1"></i>%s</time>', get_the_modified_date('c'), esc_attr(get_the_modified_date())) . $posted_on;
    }
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category = reset($categories);
        $posted_on = sprintf('<i class="fa fa-folder pr-1"></i><a href="%s">%s</a>', get_category_link($category->term_id), $category->cat_name) . $posted_on;
    }
    echo '<span class="posted-on">' . $posted_on . '</span>';
}

子テーマをクラス化している場合は以下のようになります。

add_filter('understrap_posted_on', [$this, 'myPostedon']);

public function myPostedOn() {
    $posted_on = sprintf('<time datetime="%s"><i class="fa fa-calendar pl-2 pr-1"></i>%s</time>', get_the_date('c'), esc_attr(get_the_date()));
    if (get_the_modified_date('Ymd') !== get_the_date('Ymd')) {
        $posted_on = sprintf('<time datetime="%s"><i class="fa fa-refresh pl-2 pr-1"></i>%s</time>', get_the_modified_date('c'), esc_attr(get_the_modified_date())) . $posted_on;
    }
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category = reset($categories);
        $posted_on = sprintf('<i class="fa fa-folder pr-1"></i><a href="%s">%s</a>', get_category_link($category->term_id), $category->cat_name) . $posted_on;
    }
    echo '<span class="posted-on">' . $posted_on . '</span>';
}

Googleの検索結果はtimeタグを拾うらしいので、更新日時を優先的に読み込ませるようにしています。

この変更でGoogle検索結果に更新日時が優先的に表示されるようになりました。

投稿者名を非表示にする

UnderStrap 投稿者名 非表示

https://github.com/understrap/understrap-child

UnderStrapは子テーマの使用を推奨しているので、子テーマのfunctions.phpに以下の記述をします。

add_filter('understrap_posted_by', 'myPostedBy');
function myPostedBy() {
    return '';
}

子テーマをクラス化している場合は以下のようになります。

add_filter('understrap_posted_by', [$this, 'myPostedBy']);
public function myPostedBy() {
    return '';
}

一応上書きしやすいようにfilterが設定されているので親切といえば親切ですね。

cssで非表示にするとHTMLソースには投稿者名が残されてしまうので、気になる人はfunctions.phpで対応しましょう。

記事フッターの『Posted in WordPress/コメントする』を非表示にする

子テーマのfunctions.phpに以下の記述をします。

function understrap_entry_footer() {
    return '';
}

関数によってfilterが用意されていたりされなかったりするのが少し気持ち悪いですが、上記のシンプルな記述で記事フッターを完全に非表示にできます。

WordPress関連記事

関連記事
Class Ad
Easy Table of Contents
使わないと損をする最強海外FXキャッシュバックサイトTariTali
最強キャッシュバックサイトTariTali
Taritaliは1lotにつき最大9ドル還元
損切りやゼロカットをしても資金が残ります