子テーマ

最初のテーマは sydney にしてあったのですが、アップデートしろという表示が出たのでアップロードしたところ、css やら js が効かなくなりました。

wordpress を始めたときから子テーマについていろいろ書いてあるサイト記事を全く無視してやってきましたが、そういうことだったんですね。

つまり親テーマが更新されると、親テーマに設定していた css やら js はリセットされてしまう?

でも、付随の css エディタには記録が残っていましたけどね。
しかし、テーマが子テーマに移ってしまった以上、親テーマ付随の css エディタは読んでくれないということでしょうね。

子テーマの設定方法は以下の通りです。

親テーマと同じレベルに子テーマのディレクトリを作成

これまでは sydney を使っていたので、同じレベルに「sydney-child」ディレクトリを作成します。
これはロリポップではログインして「ロリポップ! ftp 」で作成します。

style.css と functions.php の作成

作成するのは 2 つ。
style.css と functions.php です。

私は prism を使うために prism.css と prism.js をアップしてありますが、これは prism を使わなければ必要ありません。

そして以下のようにします。
prism を使わなければ、 my_prism() は必要ありません。

style.css

/*
Theme Name: sydney-child
Template: sydney
Author: moheno
*/
 
@import url('../sydney/style.css');
functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

function my_prism() {
	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' ); 
	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true ); 
}
add_action( 'wp_enqueue_scripts', 'my_prism' );

テーマを子テーマ(ここでは sydney-child )に変更

「外観」→「テーマ」で、sydney-child を選択して有効化すれば反映されるはずです。

付随の css を使う

細かい設定は付随の css を使う方が簡単なような気がします。


h2 {
	font-size: 22px;
	padding: .4em 0em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
	margin-top: 3em;
}

img {
	margin-bottom:20px;
	padding:4px;
	border:solid 1px #ccc;
}
.recipe{
	border: solid 1px silver;
	padding:10px;
	line-height:180%;
}

p{font-size:17px;}

.green{color: green;}