WordPressをVer.3.8にしてみた

もう年が変わっている…。2014年の幕開けなのですが、結構仕事がハードで年末までほぼ暇がなかった…。さすが我が社はブラック企業の鑑です。だから正月気分が抜けないなんてことは全くないわけで・・・これだけは安心ですよ。

で、気がついたらかなり前から予告されていたWordPress Ver3.8が日本語対応になっていたので、サクッとアップデートしてみました。
すると・・・ダッシュボードのWマークやらコメントの吹き出しマークやら、新規記事の追加ボタンの+マークが表示されなくて、□になっている。
どうせアップデートで大幅に出遅れている私なので、世間では既知の問題だろうとGoogle先生にお尋ねすると解決策がいくつか提示されていました。

  • 抜本的対策  プラグインの「wp-multibyte-patch」をVer.1.9にする。
  • その他対策1 .htaccessに記述を追加する。
  • その他対策2 ブラウザのキャッシュをクリアする。
  • その他対策3  /wp-content/plugins/wp-multibyte-patch/ext/ja/admin.cssを修正する。

私の場合は、そもそもWordPressを3.8にアップデートしたときにプラグイン関係もすべてアップデートしており、「wp-multibyte-patch」もV1.9に更新された対策済みのバージョンになっているにも係わらず、やはりダッシュボードのボタンの一部が表示されないため、「その他対策3」は実施しても無意味と考えられます。よって、1と2をやってみましたが改善せず…。
ただし、「Gatespace’s Blog」さんの「[WordPress 3.8] テーマやプラグインでダッシュボードメニューのアイコンを設定する方法」が解決の参考になりました。
要は、自分が使っていた管理画面に任意のCSSを適用するプラグイン「WP Custom Admin CSS」を無効化することで、解決しました。
上記のプラグインは、Unformed Buildingさんの『WordPress の管理画面にスタイルシートを追加するプラグイン「WP Custom Admin CSS」』という記事中で紹介されています。ありがたく使わせていただいています。

さて、解決したのはいいけれど、管理画面のフォントがちょっぴり汚くなってしまっています。まあ、もとのデフォルトに戻っただけなんですが、これを再度、フォント「Meiryo」で表示できるように修正します。
プラグイン「WP Custom Admin CSS」で追加できる任意のCSSにダッシュボードのボタンで使っているフォント「Dashicons」を追加してやります。

私が上記プラグインで追加してオーバーライトしているCSSは以下のようなものです。


/* Example
-----------------------------------------------------*/

body.wp-admin * {
 font-style: normal !important;
 font-family: Dashicons, Helvetica, Arial, "\0030e1\0030a4\0030ea\0030aa", meiryo, sans-serif !important;
}

body.wp-admin input[type="text"] {
 font-family: Helvetica, Arial, "\0030e1\0030a4\0030ea\0030aa", meiryo, sans-serif, monospace !important;
}

body.wp-admin textarea {
 font-family: Helvetica, Arial, "\0030e1\0030a4\0030ea\0030aa", meiryo, sans-serif, monospace !important;
}

div.wp-full-overlay-sidebar-content accordion-container {
 font-family: Meiryo,sans-serif !important;
 font-style: normal !important;
}

body.wp-admin *  のfont-familyに「Dashicons」を追加しただけです。
管理画面をリロードすると、きちんとボタン類が表示されていましたので、問題はすべて解決です。

なお、これはあくまで私の作成したカスタムCSSがWordPreww3.8に対応できていなかっただけで、決してプラグイン「WP Custom Admin CSS」の問題ではありません。
改めて作者様には感謝を申し上げます。ありがとうございます。

ヘッダ画像を変えてみた

午後、少し暇だったので利用しているテーマ「Twenty eleven」のヘッダ画像を変えてみました。テーマ付属のデフォルト画像のままでしたら、やり方の練習をかねてやってみました。
適当なヘッダ画像を1000px × 288pxになるように作成すればいいようです。

ヘッダ画像1

ヘッダ画像1

ヘッダ画像2

ヘッダ画像2

ヘッダ画像3

ヘッダ画像3

ヘッダ画像4

ヘッダ画像4

ヘッダ画像5

ヘッダ画像5

実際はこの倍くらいヘッダ画像を設定しちゃいましたが、要領は分かりました。グラフィックソフトで、アップロード前に規定の大きさに変更していましたが、Wordpress上で、トリミングもできることが分かりました。
いや、ほんとにWordpressの進化に驚いています。

ログイン画面のフォントをメイリオ化するプラグイン

ログイン画面(標準フォント)

ログイン画面(標準フォント)

昨日、管理バーをメイリオ化するプラグインを実験的に作ってみました。
ログイン画面に関しても、フォントがイマイチなので、メイリオ化してみることにします。

先人方が既にfuncitions.phpをカスタムする形で実現しているようですが、

  1. ログイン画面のCSSはデフォルトのままとする
  2. プラグインと専用CSSで変更する

という方針で行くことにします。Wordpressそのもののアップグレード時に、基のデザインに戻すための余分な作業を発生させないためです。

ログイン画面のマークアップは次のようなソースでした。

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Chameleon Cyber &rsaquo; ログイン</title>
	<link rel='stylesheet' id='wp-admin-css'  href='http://hogehoge/wp-admin/css/wp-admin.min.css?ver=3.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='buttons-css'  href='http://hogehoge/wp-includes/css/buttons.min.css?ver=3.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css'  href='http://hogehoge/wp-admin/css/colors-fresh.min.css?ver=3.6.1' type='text/css' media='all' />
<meta name='robots' content='noindex,nofollow' />
	</head>
	<body class="login login-action-login wp-core-ui">
	<div id="login">
		<h1><a href="http://ja.wordpress.org/" title="Powered by WordPress">Chameleon Cyber</a></h1>

<form name="loginform" id="loginform" action="http://hogehoge/wp-login.php" method="post">
	<p>
		<label for="user_login">ユーザー名<br />
		<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
	</p>
	<p>
		<label for="user_pass">パスワード<br />
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
	</p>
	<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> ログイン状態を保存する</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="ログイン" />
		<input type="hidden" name="redirect_to" value="http://hogehoge/wp-admin/" />
		<input type="hidden" name="testcookie" value="1" />
	</p>
</form>

<p id="nav">
		<a href="http://hogehoge/wp-login.php?action=lostpassword" title="パスワード紛失取り扱い">パスワードをお忘れですか ?</a>
</p>

<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}

wp_attempt_focus();
if(typeof wpOnload=='function')wpOnload();
</script>

	<p id="backtoblog"><a href="http://hogehoge/" title="迷子になってしまいましたか ?">&larr; Chameleon Cyber へ戻る</a></p>

	</div>

		<div class="clear"></div>
	</body>
	</html>

GoogleChromeのデベロッパーツールで、適用されているCSSと要素を探ります。結果として、

.login p

に対して、メイリオを指定をしてやればよさそうだと分かりました。

作成したプラグインのコード(wp_custom_login_css.php)

<?php
/*
Plugin Name: WP Custom Login CSS
Plugin URI: http://chameleoncyber.org/download/
Description: This plug-in to change the CSS of the login screen.
Version: 1.00
Author: chameleon
Author URI: http://chameleoncyber.org/
*/

/*  Copyright 2013 chameleon (email : postmaster@chameleoncyber.org)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

//This plug-in to change the CSS of the login screen.
//ログイン画面のフォントをメイリオ化する。
function login_css() {
    echo "\n" . '<link rel="stylesheet" type="text/css" href="' . plugin_dir_url(__FILE__) . 'login.css' . '" />' . "\n";
}
add_action('login_head', 'login_css');
?>

メイリオ化するCSS(login.css)

.login p{
    font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

メイリオ化したログイン画面

メイリオ化したログイン画面


作成したプラグインとCSSをアップロードして有効化したところ、ログイン画面もメイリオ化でました。

プラグインを作ってみた

WordPressには「管理バー」と呼ばれるツールバー状のものがあります。実は管理画面のフォントが汚かったので、メイリオで表示したいと思っていました。最初は、CSSを編集しようと考えましたが、プラグインで解決できることが分かりました。インストールしたプラグインは、WordPress の管理画面にスタイルシートを追加するプラグイン「WP Custom Admin CSS」です。

管理画面(メイリオ)

管理画面(メイリオ)

このプラグインの効果で管理画面の各種フォントを始め、管理バー(AdminBar)のフォントも「メイリオ」に変更されています。

その気になればプラグインに同梱されているCSSを編集すれば、好きなスタイルを適用できるわけですね。

ところが、管理画面を抜けてサイトを表示した状態では、管理バーのフォントは「メイリオ」ではなくなっています。

管理バー(通常フォント)

管理バー(通常フォント)

先ほどのプラグインは「管理画面のフォントを変更」してくれますが、管理画面から抜けてしまえば、その効力は左図のようになくなっています。
しかし、何とも中途半端で残念な結果ですので、何とかここもメイリオにしたいところです。 ということで、最初はCSSを編集してみました。ツールで探っていくと、管理バーのCSSは../wp-includes/css/admin-bar.cssであると分かりました。そのCSSのfont指定は「sans-serif」になっていましたから、「Meiryo」を付け加えました。自分はウィンドウズ環境で管理バーを表示させるので、表示されるフォントとして指定するのはメイリオだけで十分です。管理バーは、自分以外見ないものですから、他の閲覧者の環境は考慮しなくていいはずです・・・たぶん。そうでなければ、他の環境も考慮したフォント指定にしないと…これは後から調査することにしよう・・・。まあ、実験なので、メイリオだけで行くことに…。
結果、うまくいきませんでした。
どうやら更に、admin-bar.min.cssのfont指定を変更しなければならないようです。admin-bar.cssはオリジナルのままで、admin-bar.min.cssのフォント指定を変更しただけで、管理画面以外での管理バーのフォントがCSSで指定したものに変わりましたから、admin-bar.css→admin-bar.min.cssの順に読み込まれていくのでしょう。 さて、これで手を入れるべきCSSも分かり、結果も上々でしたので終了としたいところですが、「こんなコアファイルを変更したら、Wordpressをアップデートするたびに、忘れずに変更しないといけないんじゃないか…orz」と思い至ったわけです。これは意外にめんどくさそう。管理画面のフォントを変更するプラグインのように、インストールしておけば、いつも効力を発揮してくれるようにしたいものです。

じゃ、プラグインってどうやって作るんだろうと言うことで、いくつかのプラグインのコードを見てみました。どうやら共通要素があるようで、

<?php
/*
Plugin Name:(プラグイン名)
Plugin URI:(プラグイン配布URL)
Description:(プラグイン説明)
Version:(バージョン)
Author:(作者名)
Author URI:(作者サイトURL)
*/
// 以下プラグインの実働コード
// ・・・・・・
?>

というテンプレがあることが分かりました。さらに、WordPress のプラグインを作るのに大いに参考になりそうな「プラグインの作成 – WordPress Codex 日本語版」というサイトも見つかりました。

はい、だいたい理解できました。
CSS読み込ませるくらいなら簡単にできそうです。 サンプルコードも参考にしながら、次のようなコードを作成しました。とりあえずCSSそのものをプラグインのコードで吐き出しています。

<?php
/*
Plugin Name: WP AdminBar Custum CSS
Plugin URI: www.chameleoncyber.org/download/
Description: This plug-in adds the CSS to your Admin Bar.
Version: 1.0.0
Author: chameleon
Author URI: www.chameleoncyber.org
*/

function wp_custom_adminbar_css() {
 echo "
 <style type='text/css'>
 #wpadminbar *{
 font: normal 13px/28px Meiryo;
 }

 #wpadminbar {
 font: normal 13px/28px Meiryo;
 }

 #wpadminbar #adminbarsearch .adminbar-input{
 font: normal 13px/24px Meiryo;
 }
 </style>
 ";
}
add_action('admin_head', 'wp_custom_adminbar_css');
add_action('wp_head', 'wp_custom_adminbar_css');
?>
管理バー(通常フォント)

管理バー(通常フォント)

作成したファイルをpluginsディレクトリにアップロードして、管理画面に表示された自作のプラグインを有効化します。 管理画面を抜けて、ホームページを表示し、管理バーを見ると、フォント変更が反映していました。念のために、自作プラグインを無効化して、フォントの変更の効果が、プラグインの動作に連動するか確認してみました。OKのようです。この程度の単純なものなら思ったより簡単に、プラグインを作成できることがわかりました。 これで直接、WordpressのCSSを編集しなくても、プラグインで管理バーのフォントを変更できます。 ただし、現状ではプラグインのコードでオーバーライドするCSSを記述しているので、これをカスタマイズしやすいように別のCSSファイルとして分けることにします。

最終的に作成したものが、以下のコードです。

プラグイン「WP AdminBar Custum CSS」(wp_custom_adminbar_css.php)

<?php
/*
Plugin Name: WP AdminBar Custum CSS
Plugin URI: www.chameleoncyber.org/download/
Description: This plug-in adds the CSS to your Admin Bar.
Version: 1.0.0
Author: chameleon
Author URI: www.chameleoncyber.org
*/

/* Copyright 2013 chameleon (email : postmaster@chameleoncyber.org)

This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.

You should have received a copy of the GNU General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

//This plug-inn adds a custom CSS to Admin Bar
function wp_custom_adminbar_css() {
 echo "\n" . '	<link href="' . plugin_dir_url(__FILE__) . 'wp_custom_adminbar_css.css' . '" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'wp_custom_adminbar_css');
add_action('wp_head', 'wp_custom_adminbar_css');
?>

カスタマイズ用のCSS-「wp_custom_adminbar_css.css」

/* Sample CSS(管理バーのフォントをメイリオ化)
-----------------------------------------------------*/

#wpadminbar *{
	font: normal 13px/28px Meiryo,"メイリオ",sans-serif;
}

#wpadminbar {
	font: normal 13px/28px Meiryo,"メイリオ",sans-serif;
}

#wpadminbar #adminbarsearch .adminbar-input{
	font: normal 13px/24px Meiryo,"メイリオ",sans-serif;
}

次は、ログイン画面のフォントもメイリオ化するプラグインを作ることにします。