Webサイト制作者必見!WordPressカスタマイズの便利なTips3選

今回は、WordPressを使ったWebサイト制作において、ちょっとしたカスタマイズをしたい時に便利なノウハウを3つご紹介します。
1.ログイン画面のロゴを変更する
WordPressで作成したWebサイトのログイン画面は、標準ではWordPressのロゴになっています。これをオリジナルのロゴに変更したい場合はfunctions.phpを以下のように変更します。
画像はサーバーの画像用フォルダ(下記コードでのimagesディレクトリ)にアップロードするか、echo以降を修正しましょう。
「/images/login-logo.png」を代替のロゴとして表示するように指示しています。
親テーマの imagesディレクトリに「login-logo.png」という名前の任意画像をアップしてください。子テーマだと反映されません。
用意する画像のサイズは「横:320px まで」「縦:50~80px」くらいが最適です。
画像はサーバーの画像用フォルダ(下記コードでのimagesディレクトリ)にアップロードするか、echo以降を修正しましょう。
function custom_login_logo() {
echo '<style type="text/css">h1 a { background: url(' . get_bloginfo( 'template_directory' ) . '/images/login-logo.png) no-repeat center center !important; }</style>';
}
add_action( 'login_head', 'custom_login_logo' );
「/images/login-logo.png」を代替のロゴとして表示するように指示しています。
親テーマの imagesディレクトリに「login-logo.png」という名前の任意画像をアップしてください。子テーマだと反映されません。
用意する画像のサイズは「横:320px まで」「縦:50~80px」くらいが最適です。
2.タイトルの文字数を制限する方法
文字列の一部を取得する関数である、mb_substrを使って文字数を制限することができます。Webサイトのページ上に表示する文字数を自由に変更することができます。
文字数を20文字に制限
0が取得する始まりの位置を表し、20が取得する文字数です。
文字数を20文字に制限し、末尾に「…」をつける
上記コードの場合、20文字を超えるタイトルだと、末尾に「…」が付与されます。しかし、20文字以下であっても 末尾に「…」が付与されるので気を付けましょう。
制限文字数以上のときだけ省略記号をつける
文字数を20文字に制限
<?php echo mb_substr($post-> post_title, 0, 20); ?>
0が取得する始まりの位置を表し、20が取得する文字数です。
文字数を20文字に制限し、末尾に「…」をつける
<?php echo mb_substr($post-> post_title, 0, 20).'...'; ?>
上記コードの場合、20文字を超えるタイトルだと、末尾に「…」が付与されます。しかし、20文字以下であっても 末尾に「…」が付与されるので気を付けましょう。
制限文字数以上のときだけ省略記号をつける
<?php
if(mb_strlen($post->post_title)>20) {
$title= mb_substr($post->post_title,0,20) ;
echo $title . '...';
} else {
echo $post->post_title;
}
?>
3.特定のページに問合わせフォームを表示
特定のページやカテゴリに属するページには問合せフォームを表示させたいなど、条件分岐させる例をいくつかご紹介します。
トップページとそれ以外のページの条件分岐
投稿ページの条件分岐
固定ページの条件分岐
複数の指定した投稿ページで条件分岐
固定ページの場合は、is_pageに書き換えるとよいです。
カテゴリーページの条件分岐
複数の条件分岐
以下のコードのように、それぞれのページ毎に条件分岐させる事もできます。
トップページとそれ以外のページの条件分岐
<?php if( is_home() || is_front_page() ) : ?>
トップページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
投稿ページの条件分岐
<?php if( is_single() ) : ?>
投稿ページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
固定ページの条件分岐
<?php if( is_page() ) : ?>
固定ページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
複数の指定した投稿ページで条件分岐
<?php if( is_single( array('投稿ID','投稿ID','投稿ID') ) ) : ?>
投稿ページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
固定ページの場合は、is_pageに書き換えるとよいです。
カテゴリーページの条件分岐
<?php if( is_category() ) : ?>
カテゴリーページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
複数の条件分岐
以下のコードのように、それぞれのページ毎に条件分岐させる事もできます。
<?php if( is_home() || is_front_page() ) : ?>
フロントページで表示
<?php elseif( is_single() ) : ?>
投稿ページで表示
<?php elseif( is_page() ) : ?>
固定ページで表示
<?php else: ?>
それ以外のページで表示
<?php endif; ?>
まとめ
今回のコラムでは、WordPressを使ったWebサイト構築におけるカスタマイズのTipsを3つご紹介しました。
1.ログイン画面のロゴを変更する
WordPress感を強調せず、独自サービスのロゴを表示したい場合に便利です。
2.タイトルの文字数を制限する方法
サイトのレイアウト的に長くなりすぎると見た目に問題があるときに便利です。
3.特定のページに問合わせフォームを表示
各ページに手動で問い合わせフォームを設置するのではなく、カテゴリー毎など、自動的にフォームを表示させたい時に便利です。
1.ログイン画面のロゴを変更する
WordPress感を強調せず、独自サービスのロゴを表示したい場合に便利です。
2.タイトルの文字数を制限する方法
サイトのレイアウト的に長くなりすぎると見た目に問題があるときに便利です。
3.特定のページに問合わせフォームを表示
各ページに手動で問い合わせフォームを設置するのではなく、カテゴリー毎など、自動的にフォームを表示させたい時に便利です。