本ブログでは、クリーンでミニマルなレスポンシブ WordPress テーマ、Sparkling を使用しています。そのままでもスタイリッシュに使える素晴らしいテーマなのですが、いくつかカスタマイズを行っていますので、備忘録も兼ねてその内容を公開します。
この記事を書いている時点の Sparkling のバージョンは 2.4.8 になります。バージョンアップによって当記事の内容が適用できない可能性がありますので、注意して下さい。
Sparkling はクリーンでミニマルなレスポンシブ WordPress テーマです。旅行・健康・ビジネス・金融・ポートフォリオ・デザイン・アート・写真・個人などといったトピックや、その他どんなクリエイティブなサイトやブログにも適しています。Bootstrap 3 を使って開発されているため、モバイルやタブレット画面にも対応しています。全画面スライダー・ソーシャルアイコン連携・投稿者プロフィール表示・人気投稿ウィジェット・改善されたカテゴリーウィジェットが含まれています。Sparkling は HTML5 や CSS3 といった最新の Web スタンダードを組み込んでおり、クリーンな構造とコードによって SEO フレンドリーになっています。数十個のテーマオプションで、テーマのレイアウト・色・フォント・スライダー設定などを変更できます。テーマはさらに翻訳・多言語対応で、WPML への互換性があります。スペイン語・フランス語・オランダ語・ポーランド語・ドイツ語・ロシア語・ポルトガル語 (ブラジル)・ポルトガル語 (ポルトガル)・ペルシア語 (イラン)・ルーマニア語・トルコ語・ブルガリア語・日本語・リトアニア語・チェコ語・ウクライナ語・中国語 (繁体)・中国語 (簡体)・インドネシア語・エストニア語・スペイン語 (アルゼンチン)・イタリア語に翻訳されています。Sparkling は無料の WordPress テーマで、プレミアム版機能・デザインも用意されています。現在このテーマは bbPress・Contact Form 7・Jetpack・WooCommerce など人気の無料・プレミアムプラグインとともに動作するよう最適化されています。最近のリリースで、WordPress カスタマイザーから有効化・無効化できる固定ナビゲーションを導入しました。
Colorlib, Sparkling (バージョン: 2.4.8)
本記事では、テンプレートファイルを直接変更するため、変更した内容に誤りがあるとブログが正常に機能しない恐れがあります。また、テーマファイルが更新されると、加えた変更がリセットされます。従って、テンプレートファイルを変更する前や、テーマの更新前には必ずバックアップを取りましょう。
バックアップするフォルダは、/wp/wp-content/themes/sparkling/ です。
functions.php
記事の自動整形機能の無効化
私が WordPress に記事を投稿する際は、Classic Editor を使って HTML タグをそのまま入力して見栄えを調整しています。しかし、WordPress に実装されている改行などを勝手に自動整形してくれるありがた迷惑な機能によって、予期せぬ p タグが挿入され、レイアウトが崩れることが多々あります。
そこで、functions.php の最後に、勝手に p タグや br タグを挿入する自動整形を無効化するコードを追加しています。
// 記事の自動整形を無効化
remove_filter('the_content', 'wpautop');
// 抜粋の自動整形を無効化
remove_filter('the_excerpt', 'wpautop');
この自動整形機能の無効化は、HTML タグを直接入力して投稿している人には必須の設定です。
ショートコードで自作PHPコードを読み込む
自作PHPコードを投稿に埋め込みたいときに使います。
// ショートコードで自作PHPコードを読み込む
function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params));
ob_start();
include(STYLESHEETPATH . "/myphpcode/$file.php");
return ob_get_clean();
}
add_shortcode('call_php', 'my_php_Include');
functions.php の階層に、「myphpcode」というフォルダを作成し、その中にPHPファイルを作成します。フォルダ名は適宜書き換えてください。
例えば、helloworld.php を呼び出したい時は、投稿ページに以下のショートコードを記述します。
[call_php file='helloworld']
実際に呼び出してみると、
「現在時刻は、2024年04月16日 21時17分56秒です」
のように記述されます。自作PHPが呼び出されていれば、現在時刻が表示されるはずです。
template-parts/content-single.php
Sparkling の個別記事テンプレートは、template-parts/content-single.php になります。
個別記事のアイキャッチ画像の表示位置を本文の直前に移動させ、アイキャッチ画像のキャプションを表示させます。キャプションを表示させる理由は、Flickr から画像を挿入する際のクレジットをキャプションに書き込んでいるからです。
以下の部分がアイキャッチ画像を表示させる部分なのですが、
<?php
$featured_image_args = array(
'class' => 'single-featured',
);
if ( is_page_template( 'page-fullwidth.php' ) ) {
the_post_thumbnail( 'sparkling-featured-fullwidth', $featured_image_args );
} else {
the_post_thumbnail( 'sparkling-featured', $featured_image_args );
}
?>
これを以下の場所にカット＆ペーストし、最後にキャプションを表示させるコードを追加しています。
</div><!-- .entry-meta -->
<div class="post-thumbnail">
<?php
// アイキャッチ画像を表示
$featured_image_args = array(
'class' => 'single-featured',
);
if ( is_page_template( 'page-fullwidth.php' ) ) {
the_post_thumbnail( 'sparkling-featured-fullwidth', $featured_image_args );
} else {
the_post_thumbnail( 'sparkling-featured', $featured_image_args );
}
if(get_post( get_post_thumbnail_id() )->post_excerpt) {
echo '<div class="post-thumbnail-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>';
}
?>
</div><!-- .post-thumbnail -->
</header><!-- .entry-header -->
また、アイキャッチ画像の元の場所を忘れないように、コメントを入れておくと後々の修正が捗ります。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// オリジナルではここにアイキャッチ画像を表示させるコードが挿入されていました
?>
<div class="post-inner-content">
template-parts/content-page.php
Sparkling の固定ページテンプレートは、template-parts/content-page.php になります。
個別記事テンプレートとHTMLが異なり、個別記事に適用したスタイルシートのカスタマイズがそのまま固定ページに反映されなかったため、page-inner-contentというクラスを追加します。
<div class="post-inner-content page-inner-content">
header.php
head 部に追加のスタイルシートとシンタックスハイライト用JSを読み込ませます（実際には他にもGoogle のサービス用スクリプトなどを読み込ませています）。スタイルシートを上書きさせるために、head内の最後に挿入します。
オリジナル
<?php wp_head(); ?>
</head>
変更後
<?php wp_head(); ?>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
highlight.js は、highlight.js demo から気に入ったスタイルシートを適用させています。
追加のスタイルシート style-add.css を作成
スタイルシートに関して、オリジナルの style.css は複雑で行数も多いため手は加えず、追加のスタイルシート style-add.css を新規で作成して、変更箇所を記述していきます。CSS ファイルの置き場は、header.php で指定したテンプレートディレクトリです。
気に入って使い始めたテーマなので、主に手を加えているのは記事本文の見た目の調整になります。
テーマの更新があったときの手順
テーマの更新通知が来た時にそのまま更新してしまうと、これまでに行ったカスタマイズは全て上書きされてしまいます。そうならないように、以下の手順で更新を行います。
- ローカルの sparkling フォルダ名を変更する。私の場合は、"sparkling247"のようにバージョンをフォルダ名に追加しています。テーマフォルダの場所は、/wp/wp-content/themes/sparkling/ です。
- WordPress管理画面から、テーマの更新を行います。
- サーバーの sparkling フォルダ（更新されたものになります）をローカルにダウンロードし、sparkling フォルダを丸ごとコピーします。コピーしたフォルダ名は、"sparkling248org"とし、このフォルダはオリジナルデータとして手は加えません。
- 更新があったファイルとカスタマイズした前バージョンのファイルを、VSCode の差分比較機能（Compare Active File With…）を使って開き、確認しながら修正を行います。
- 修正したファイルをサーバーにアップロードして終了。
頻繁に更新されると面倒ですが、現状はこの方法で続けています。