独自CSSをWordPressのソースに追加

このカスタマイズですが、テーマ毎に追加修正しなければならないという点がちょっと面倒です。
しかしCSSファイルをエディタ等で気軽に編集できるので便利…といえば便利かもしれませんが、問題もあります。

例として「twentysixteen」を挙げてみます。
wordpress/wp-content/themes/twentysixteen

twentysixteenディレクトリ直下にCSSファイルを置いても大丈夫ですが、新たにディレクトリ(custom)を作成して、そこにファイルを置くことにします。

オリジナルCSSファイル置き場のディレクトリを作成
wordpress/wp-content/themes/twentysixteen/custom

(例)
wordpress/wp-content/themes/twentysixteen/custom/dukehide.css

.custom-type01 {
border-style: solid;
border-width: 1px;
padding: 8px 10px 8px 15px;
border-color: #e7e7ff;
color: #101013;
background-color: #ffd700;
font-family: sans-serif;
border-radius: 10px;
}

○方法1
wordpress/wp-content/themes/twentysixteen/header.php に記載
21行目辺り
 :
(略)
 :
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<?php endif; ?>
<?php wp_head(); ?>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/custom/dukehide.css” type=”text/css” />
</head>
 :
(略)
 :

○方法2
wordpress/wp-content/themes/twentysixteen/functions.php に記載
240行目辺り

function twentysixteen_scripts() {
 :
(略)
 :
// Theme stylesheet.
wp_enqueue_style( ‘twentysixteen-style’, get_stylesheet_uri() );

// Custom stylesheet.
wp_enqueue_style( ‘twentysixteen-style-custom’, get_template_directory_uri() . ‘/custom/dukehide.css’, array(), ‘1.0’ );
 :
(略)
 :
}

方法1、2どちらでも可。あとはCLASS指定をすればOK。
(例)

<div class”custom-type01″>
文字列
</div>

本来はCSSカスタマイズ用のページがあるので、そちらに直接記載していくのが正しいやり方っぽいです。
また上記のようなカスタマイズは、テーマアップデート後に再度記述し直すという欠点があるので、正直オススメは出来ません (^^;)

じゃあ何故こんな面倒なことをやったのか? と言われたら、単に自宅サーバーのメリットを活かした…と言ったところでしょうか。

%d人のブロガーが「いいね」をつけました。