難しいプログラミングの知識が無くても、カッコいいブログサイトを構築出来るCMS(コンテンツ・マネジメント・システム)、WordPress。しかし、サイトの細かいデザインや使い勝手を改善したい場合は、PHPやHTML、CSSをある程度理解している必要があります。
とはいえ、WordPressのためにこれらの言語を一から勉強していては、いつまで経ってもブログ運営を始められません。
そこで今回は、プログラミング初心者でもコピペだけで簡単に実装出来る、WordPressのカスタマイズ方法をご紹介していきます。

カスタマイズ時の注意点

ファイルのバックアップを取っておくこと

今回ご紹介するカスタマイズでは、テーマのソースファイルを直接書き換えます。そのため、作業中のちょっとしたミスで、WordPress自体が正常に動かなくなってしまう危険性もあるので注意してください。
カスタマイズする際は、書き換える前のソースファイルをFTPソフトなどでダウンロードし、ご自身のPC上にバックアップしておくことをおすすめします。そして万が一、カスタマイズによってWordPressがおかしくなってしまった場合は、PCに保存しておいたファイルをサーバー上のものと置き換えて復旧する様にしてください。

カスタム1. 文字表示が汚い場合のフォント変更方法

海外製のテーマを有効化して、サイトの表示を確認したとき、あまりのフォントの汚さに愕然とした経験はありませんか?これは、スタイルシート内のフォント設定が日本語サイト向けになっていないことが原因です。

style.cssのフォント設定を日本語向けにする

WordPress の「外観」>「テーマ編集」などからstyle.css を開きましょう。
サイト上のフォントは、「font:」「font-family:」から始まる行で設定されています。ブラウザの検索機能(Ctrl + F)を使って、該当箇所を探し出しましょう。フォント名が列挙されている行を見つけたら、フォント名を全て削除し、代わりに次の文字列を追加してください。
メイリオ, Meiryo, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”
フォントは左側に書かれているものから優先的に採用されます。フォントの優先度を変えたい場合や他に使用したいフォントがある場合は、適宜修正してください。

カスタム2. フッターに「Copyright(C)」を表示したい

ブログの著作権を守るために大切な「Copyright(C)」表示。テーマによってはデフォルトで表示してくれているものもありますが、大半の無料テーマは「Copyright(C)」に対応していません。

フッターに「Copyright(C)」を表示するには

「テーマの編集」からfooter.phpを開きましょう。「
」というタグを発見したら、そのタグの直前に次のソースをコピペしてください。

<p class="copy">Copyright©
<!--?php bloginfo( 'name' ); ?-->
,
<!--?php echo date( 'Y' ); ?-->
All Rights Reserved.</p>

このソースを追加すると、ブログのフッター部に以下の様な「Copyright(C)」が表示されます。
Copyright©【サイト名】 , 【現在の年号(“2017”など)】 All Rights Reserved.

カスタム3. <iframe width=”300″ height=”150″>で埋め込んだコンテンツをレスポンシブ表示にしたい

レスポンシブ(レスポンシブデザイン)とは、サイトを閲覧しているユーザーの画面サイズに応じて、動的に画面構成を変更する仕組みのことです。PC、スマホのどちらで閲覧しても表示が乱れないため、より多くのユーザーにサイトのコンテンツを楽しんでもらえます。YouTubeの動画やGoogle Map、各種広告をWordPress上に掲載する際、<iframe>~</iframe>
で囲まれたタグを挿入するのですが、テーマがレスポンシブデザインに対応していない場合、閲覧する端末によっては表示が大きく乱れてしまう場合があります。その様なときは、以下のプログラムを各ソースファイルに追加して、<iframe width=”300″ height=”150″>コンテンツをレスポンシブ対応させましょう。
functions.php

if ( !function_exists( 'wrap_iframe_in_div' ) ) {
/* iframeのレスポンシブ対応 */
function wrap_iframe_in_div( $the_content ) {
if ( is_singular() ) {
$the_content = preg_replace(
'!(&lt;\s*?iframe(?:\s+[^&gt;]*&gt;)?)(.*?)()!is',
'
<div class="iframe-container">$1$2$3</div>
',
$the_content
);
}
return $the_content;
}
add_filter( 'the_content', 'wrap_iframe_in_div' );
}

style.css

/* iframeレスポンシブ表示 */
iframe {
max-width: 100%;
}
.iframe-container {
position: relative;
padding-bottom: 56.25%; /* ★ */
padding-top: 30px; /* ★ */
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

★マーク部分は、サイトのデザインに応じて適宜修正してください。

カスタム4. 投稿一覧にサムネイルを表示したい

「管理者ページの投稿一覧に、サムネイルが表示されたら良いのに」と思ったことはありませんか?以下のソースを追加すれば、画面上部の「表示オプション」>「カラム」からサムネイルの表示有無を設定出来る様になります。
functions.php

/* iframeレスポンシブ表示 */
iframe {
max-width: 100%;
}
.iframe-container {
position: relative;
padding-bottom: 56.25%; /* ★ */
padding-top: 30px; /* ★ */
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}