Customizr・cssやphpのカスタマイズ

wordpress-customizr

wordpressのテーマCustomizrのcssおよびphpページのカスタマイズ法をまとめる。

Customizrのcssのカスタマイズ

cssのカスタマイズにはstyle.cssを使用する。style.cssの下部にこれから解説するコードを追加していこう。どのようにサイトの表示が変わるか確認して欲しい。

ヘッダー部の背景色の変更とヘッダー部下部のボーダー(横線)の色の変更

/* ヘッダー部 */
.tc-header{
background:#905D5D;
border-bottom:10px solid #FFFFFF;/* ヘッダー下部のボーダー */
}

サイトタイトルを日本語フォントに変更する

またサイトタイトルの文字の大きさ、高さ、表示位置も調整する。

/* サイトタイトル */
a.site-title {
font-family:
"メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS Pゴシック",
"Lucida Grande",
"Lucida Sans Unicode",
Arial,
Verdana,
sans-serif;
font-size: 28px; /* 文字の大きさ */
line-height: 2 ; /* 文字の高さ */
padding: 17px 0 0 10px ;/* 位置を整える */
}

グローバルメニューの文字色を変える

/* メニューの文字の色調整 */
body, .navbar .nav>li>a {
color: #3C3C3C;
}

サイト説明文の調整

ウィンドウを全面表示した時のサイト説明文の色と、ウィンドウを縮小表示した時のサイト説明文の色を調整する

/* ウィンドウ拡大時のサイト説明文の色の調整 */
.navbar-wrapper .navbar h2{
color: #FF9019;
}
/* ウィンドウ縮小時のサイト説明文の色の調整 */
h2.site-description{
color: #FF9019;
}

見出しの文字の影を消す

Customizrはデフォルトで見出しの文字に影が付く設定になっている。その影を付かないように設定する。

/* 見出しの文字の影を無くす */
h1, h2, h3, h4, h5, h6{
text-shadow: 0 0 0 #000000;
}

記事部分の文字を日本語対応フォントに指定する

記事部分の文字の色やサイズも変更する。

/* フォントと文字の大きさ、色 */
body {
font-family:
"メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS Pゴシック",
"Lucida Grande",
"Lucida Sans Unicode",
Arial,
Verdana,
sans-serif;
text-rendering:optimizeLegibility;
color: #000000; /* 文字色 */
font-size: 15px; /* 文字の大きさ */
}
body.custom-font-enabled {
font-family: "メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS Pゴシック",
"Lucida Grande",
"Lucida Sans Unicode",
Arial, Verdana, sans-serif;
}

本文中の行間の調整をする

/* 本文中の行間 */
.entry-content p {
line-height: 30px;
}

記事内のリンクの色と太字、下線の調整をする

/* 記事内のリンクの色 */
.entry-content a{
color:#FC7F19;
font-weight: bold;
text-decoration: underline;
}

記事内の文字の太字設定をする

/* 記事内の文字の太字設定 */
.entry-content {
font-weight: normal;
}

記事タイトルの”recently updated”を非表示にする

新しく投稿した記事の記事タイトルには”recently updated”が表示される。このrecently updatedを表示されないようにする。

/*記事タイトルのrecently updatedを非表示に*/
.badge, .label{
display: none;
}

フィーチャーページの調整をする

フロントページに表示されているフィーチャーページの表示調整をする。

/* フィーチャーページの色の調整 */
.round-div{
border: 104px solid #3F2C2C;
}
/* フィーチャーページのタイトルの調整 */
.widget-front h2{
font-size:22px;
font-weight:bold;
}

ウィジェットタイトルの調整をする

ウィジェットタイトルの文字の大きさ、色の調整をする。

/* ウィジェットタイトルの調整 */
.widget-title{
font-size:18px;
color:#000000;
}

ウィジェットの文字の調整をする

ウィジェットの文字の大きさ、色の調整をする。

/* ウィジェット文字の調整 */
.textwidget{
color:#FC6608;
font-size: 16px;
}

見出しの調整をする

見出しの表示調整をする。例としてh2のコードをを添付しておく。h3,h4.,h5にも適用可能だ。

/* 見出しh2の調整 見出し風*/
.entry-content h2 {
color:#000000;/* 色の指定 */
font-size: 30px; /* 文字の大きさ */
line-height: 1.5 ; /* 見出しの高さ */
border-bottom:3px solid #FF9019; /* 下の線 */
}

画像のキャプションの表示調整をする

/* 画像のキャプションの調整 */
.wp-caption .wp-caption-text {
    font-size: 17px; /* 文字の大きさ */
    font-size: 1.214285714rem; /* 文字の大きさ */
    color: #000000; /* 文字の色 */
}

ページネーションの表示を消す

/*ページネーションの表示を消す*/
.previous .nav-previous{
display: none;
}
.next .nav-next{
display: none;
}

ページネーション部のPost navigationの表示を消す

Customizrではページネーション部にPost navigationという文字が表示される。これを表示されないように設定する。

/*ページネーション部のPost navigationの表示を消す*/
.assistive-text{
display: none;
}

フッター部の下にある、コピーライト、ソーシャルブックマーク部の背景色の変更をする

/* フッター部下のコピーライトやソーシャルブックマーク部 */
footer#footer .colophon{
background-color:#3F2C2C;
}

フッター部の背景色の変更をする

/* フッター部 */
footer#footer{
background:#905D5D;
}

フッター部にあるソーシャルブックマークの色の調整をする

/*フッター部ソーシャルブックマークの調節*/
footer#footer .colophon .social-block a{
color: #FFFFFF;
}

フッター部のコピーライトの色の調整をする

/*フッター部コピーライトの調節*/
footer#footer .colophon a, footer#footer .colophon p{
color:#AB9C9C
}

クレジットを消す

Customizrではデフォルトでページ下にCustomizrのクレジット、そしてそのリンクが表示される。このクレジットを削除する方法を解説する。

クレジットを削除するにはczr-front.phpファイルを操作する。

czr-front.phpファイルは

wordpress/wp-content/themes/customizr/inc/

にある。

czr-front.phpファイルで

	    function czr_fn_colophon_center_block() {
	    	echo apply_filters(
	    		'tc_credits_display',
	    		sprintf('<div class="%1$s">%2$s</div>',
		    		apply_filters( 'tc_colophon_center_block_class', 'span6 credits' ),
		    		sprintf( '<p>%1$s %2$s %3$s</p>',
						    apply_filters( 'tc_copyright_link', sprintf( '&middot; <span class="tc-copyright-text">&copy; %1$s</span> <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a>', esc_attr( date( 'Y' ) ), esc_url( home_url() ), esc_attr( get_bloginfo() ) ) ),
                            apply_filters( 'tc_credit_link', sprintf( '&middot; <span class="tc-credits-text">Designed by</span> %1$s', '<a href="'.CZR_WEBSITE.'">Press Customizr</a>' ) ),
                            apply_filters( 'tc_wp_powered', sprintf( '&middot; <span class="tc-wp-powered-text">%1$s</span> <a class="icon-wordpress" target="_blank" href="https://wordpress.org" title="%2$s"></a> &middot;',
                              __('Powered by', 'customizr'),
                              __('Powered by WordPress', 'customizr')
                            ))
					)
	    		)
	    	);
	    }

という部分を探そう。この部分を

	    function czr_fn_colophon_center_block() {
	    	echo apply_filters(
	    		'tc_credits_display',
	    		sprintf('<div class="%1$s">%2$s</div>',
		    		apply_filters( 'tc_colophon_center_block_class', 'span6 credits' ),
						    apply_filters( 'tc_copyright_link', sprintf( '&middot; <span class="tc-copyright-text">&copy; %1$s</span> <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a>', esc_attr( date( 'Y' ) ), esc_url( home_url() ), esc_attr( get_bloginfo() ) ) )
	    		)
	    	);
	    }

に変更しよう。

これでクレジット表示の削除ができた!

記事一覧ページの改良

記事一覧ページでそれぞれの記事の内容を表示するように設定してる場合、最後に”[・・・]“という記号が表示される。この記号を”続きを読む→“に変えて該当ページへのリンクを付加する。

記事一覧ページの改良をするにはfunctions.phpを操作する。functions.phpに次のプログラムを書き足そう。

<?php
/**
* Sets the post excerpt length to 40 words.
*
* To override this length in a child theme, remove the filter and add your own
* function tied to the excerpt_length filter hook.
*/
function customizr_excerpt_length( $length ) {
return 40;
}
add_filter( 'excerpt_length', 'customizr_excerpt_length' );
if ( ! function_exists( 'customizr_continue_reading_link' ) ) :
/**
* Returns a "Continue Reading" link for excerpts
*/
function customizr_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( '続きを読む <span class="meta-nav">→</span>', 'customizr' ) . '</a>';
}
endif; // customizr_continue_reading_link
/**
* Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and customizr_continue_reading_link().
*
* To override this in a child theme, remove the filter and add your own
* function tied to the excerpt_more filter hook.
*/
function customizr_auto_excerpt_more( $more ) {
return ' …' . customizr_continue_reading_link();
}
add_filter( 'excerpt_more', 'customizr_auto_excerpt_more' );
/**
* Adds a pretty "Continue Reading" link to custom post excerpts.
*
* To override this link in a child theme, remove the filter and add your own
* function tied to the get_the_excerpt filter hook.
*/
function customizr_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= customizr_continue_reading_link();
}
return $output;
}
add_filter( 'get_the_excerpt', 'customizr_custom_excerpt_more' );
?>

これで記事一覧ページの改良が完成した!

注意:functions.phpの扱いは注意が必要だ。記入するプログラムを間違えると表示がおかしくなる事がある。気をつけよう。