【Simplicity】子テーマのfunctions.phpに追加した内容

2015/4/10 約 11 分で読めます

先日、サイトのテーマを「Simplicity」に変更したことを書きました。
本日はSimplicityの子テーマ：functions.phpに追記した内容を書かせて頂きます。

関連記事サイトテーマを「STINGER3」から「Simplicity」に変更しました

スポンサーリンク

子テーマのfunctions.phpに追加した内容

子テーマでfunctions.phpを扱う際の注意

style.CSSやsingle.phpなどと違いfunctions.phpは、上書きをしてくれません。
あくまで親テーマのfunctions.phpに追記するという扱いになります。

そのため、親テーマ内で記述したものを子テーマ内のfunctions.phpに書くことが厳禁です。
functions.phpに追記をする際は、必ずバックアップをとっておきましょう。

【注意】functoins.phpをWordPressの子テーマに追加する場合 – PresentNote
presentnote.com

詳しくは上記のサイト様で解説されています。

Simplicityは公式サイトで子テーマを用意してくれている

Simplicityの子テーマ
テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それ
wp-simplicity.com

よく触りそうな、style.cssやfunctions.phpを用意してくれています。
サイトをカスタマイズする際はダウンロードして子テーマに修正や追加を行いましょう。

ページ毎に独自のCSS・JavaScriptを追記する

独自CSS

//独自CSS
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

独自JavaScript

//独自JavaScript
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high');
}
function custom_js_input() {
	global $post;
	echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
	echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
	if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js = $_POST['custom_js'];
	update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
		endwhile; endif;
		rewind_posts();
	}
}

上記を子テーマ内のfunctions.phpに貼り付けます。
そうすると投稿ページや固定ページ内に下記のように表示されます。

simplicity-functions01

特定の投稿・ページだけに適応されるCSSやJavaScriptを設置可能です。
痒いところに手が届くカスタマイズなので非常にオススメです。

自動保存解除

自動保存解除

//自動保存解除
function disable_autosave() {
    wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'disable_autosave' );

wordpressでは、自動的にバックアップを取る自動保存する機能があります。

自動保存は個人的に好きではなく（稀にフリーズ？する時があったので）、この記述をfunctions.phpに記述しています。

いままではプラグインで制御していましたが、functions.phpでの管理に切り替えました。

関連記事【Simplicity】このサイトで使用しているプラグインたち

固定ページの抜粋

//固定ページに抜粋追加
add_post_type_support( 'page', 'excerpt' );

通常、投稿ページにのみある「抜粋」を固定ページにも追加するものです。

導入した理由は、検索窓に固定ページが表示された際に抜粋がないために、先頭の100文字が自動で選択されてしまっていたからです。

simplicity-functions02

固定ページの抜粋を使うことで上記のように、表示をコントロール出来ます。

ウィジェットのカテゴリー表示の変更

functions.phpに追記した内容

//カテゴリーカスタマイズ
function theme_list_categories( $output, $args ) {
	$replaced_text = preg_replace('/<\/a> \(([0-9]*)\)/', ' <span class="count">${1}</span></a>', $output);
	if($replaced_text != NULL) {
		return $replaced_text;
	} else {
		return $output;
	}
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

style.cssに追記した内容

//このサイトのCSS
.cat-item a {
	display: block;
	overflow: hidden;
	*zoom: 1;
	padding: 4px;
	color: #313131;
	text-decoration: none;
}
.cat-item a:hover {
	background: #f0f0f0;
}
.cat-item a:hover span {
	color: #fff;
	background: #313131;
}
.cat-item span {
	display: inline;
	float: right;
	margin-left: 8px;
	padding: 1px 8px;
	font-weight: bold;
	color: #313131;
	background: #f0f0f0;
}

サイドバーの表示をカスタマイズするために追記しています。
サイトのCSSは実際にこのサイトで使用をしているものになります。

simplicity-functions03

両方を追記すると上記のようなカテゴリー表示になります。
CSSは好み、サイトに合ったかたちで変更をしてみてください。

JetpackのOGPを止める

//JetpackのOGPを止める
remove_action('wp_head','jetpack_og_tags');
add_filter( 'jetpack_enable_opengraph', '__return_false' );

Jetpackは多機能で便利なプラグインで、このサイトでも利用しています。
しかしOGPに関してはカスタマイズ性が低く使いにくい側面があります。

また、SimplicityではデフォルトでOGP情報がサイトソースに付加されるので機能を停止させています。

Simplicityを導入したら不要になるプラグインなど
無料WordpressテーマのSimplicityを導入したら不要になるプラグインの候補を紹介します。もちろん、そのままプラグインを使用していただいても構いません。photo by Armando TorrealbaFacebook OGP
wp-simplicity.com

公式サイトでSimplicity使用時に不要になるプラグイン情報が掲載されています。

関連記事FacebookページとWordPressサイトの連動方法

まとめ

当サイトの子テーマfunctions.phpに追加した内容でした。
wordpressをいじり始めた数年前はfunctions.phpは難しそうというイメージがありました。

しかし、実際に使ってみると便利で多くのプラグインを外すことに成功しました。
wordpressへの理解も深まると思いますので、ぜひ、触ってみてください！

ただし、functions.phpのバックアップは必ず取りましょう。
失敗すると画面が真っ白になるなどエラーに襲われます。

今回は書かせて頂いたコードは下記のサイト様を参考に書いております。
より詳しく解説されてるのでぜひ、見てみてください！

本日はこれで失礼致します。

参考サイト様

WordPressレッスンブック 5.x対応版
created by Rinker
ソシム
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう！
スポンサーリンク

WordPress , , @pre_muneoka