Archives 2019.05.05

Tweets for 2019-05-04

  • RT @hayashih: 基本情報処理技術者試験のために勉強した知識はIT業界で15年働いていても役に立っています。
    この知識を教えてくれる人は会社にはいませんでした。 ->
  • 昨日は実家の溝掃除して腰が未だに少し重怠いぞ。元用水路で今は雨水排水路になってる。実家の敷地隣接部分だけで、80mはあるからな。しかも4年ぐらい誰も掃除をしてなかったらしい。 ->
  • 水利組合が登記簿上の地権者で、田んぼに導水してた頃は1年に1回は掃除にきてたそうだ。その他に近所のお年寄りが「流れが悪いと大雨で自宅に水がくる」とかで掃除してた。ただこの人も、張り出した大きな枝を切ってうちの庭に投げ込んだりして、ちとやり方が微妙。町会の清掃対象にもなってない。 in reply to K_akiya ->
  • 実家を取り囲むような溝、水利組合と下水道課に話付けて埋めてしまいたいよ。排水の付け替えで結構な金がかかりそう。 ->
  • クルマの入れない路地奥の家があって1軒は30年ぐらい空き家だからな。そういうの市税をつぎ込んでどんどん解体して土地を再利用できるようにして欲しいね。今はスーパーも銀行も郵便局も徒歩圏内にある便利立地だから、そういう店や公共施設がま… https://t.co/Fm7HOZpAdZ ->
  • 駅前までバスで10分みたいな、70年代ニュータウンも抱えてるが、そっちはもうどうしたもんか分からんな。 in reply to K_akiya ->
  • しかも駅前商店街もシャッター通りになってて、店もねえときた。中小スーパーはニュータウン内に2軒ある、コンビニも何軒かある(新設ー撤退ループしてるが)それ以外はロードサイド店までいかないとだ。坂もキツいし何するにもクルマクルマ。でも古い区画は駐車スペース2台とれない。詰んでるやろ。 in reply to K_akiya ->
  • RT @Isuzu_T: 上皇陛下「人生で一度くらい、あてのない旅というものに出かけてみたいのです」
    侍従「確かに陛下は今まで何につけ予定、予定でした……難しいでしょうが、できるかぎり……」
    上皇陛下「ついては私、『サイコロの旅』というものがあると聞いたのですが」
    侍従「無理で… ->
  • RT @qnighy: https://t.co/zvMRCi4bsm
    MozillaがRustのためのエンジニア求人を出している。仕事内容はRustのためのインフラ(コンパイラのためのCIや、Cargoのパッケージインデックスであるcrates io)。求められる能力としてO… ->
  • この人の話は、流行の言葉で中身を理解して使ってるか、聞きかじった流行の言葉を使いたいだけか、というのは案外簡単に分かってしまう、対面なら特に。というのを最近、改めて実感したな。普段は後者のタイプの人と接点ないから。 ->
  • RT @akinosora0726: 😉 https://t.co/ahHCPlqfJL ->
  • RT @USAFCENT: #USAF #F35A Lighting II conducted its first combat employment. https://t.co/MQIsHH5j8K
    #AirForce #Aircraft #Aviation
    @Depto->
  • 墜落したF35Aは機体は見つかるだろうけど、パイロットは… ->
  • RT @girlmeetsNG: 日経新聞「きょうのことば」より
    『フォロワー』
    「日経基準」ではフォロワー1,000人までは一般人。
    1,000人~1万人が中小インフルエンサー。
    1万人~100万人がトップインフルエンサー。
    で、100万人越えると有名人。 https… ->
  • 日本のアクティブアカウント数4500万に対し、Twitterの有名人は57人です。これが有名人とトップインフルエンサーの壁です、ご査収ください。 https://t.co/e9RCXfLWOM https://t.co/I3mRL5IydR ->
  • 普通ていうか、もう定番ですわ。ローンチ時期だけならMicrosoft Teamsの方が新しいはずだけど、「最新のツール」とは言いたがらない。 https://t.co/kJsFACwrca ->
  • 古のRedmineは今も第一線で使えるツールですよ。ただ、デフォルトテーマのデザインがね… ->
  • コミュニケーションツールってことなら、Atlassianのも新しいのがあるっぽいけど使ってる人いなさそう。Basecampはアジャイル開発でイテレーションのブン回し特化らしいので、これまた使ったことがない、英語だし。 ->
  • Jiraも使ったことがない。 ->
  • 「最新ツールはこれ!Git!」とか言われたら「こりゃヤベーな」という感じがするが「最新ツールはこれ!Trello!」と言われてもあまりヤバい感じはしない。開発におけるカンバン方式が提唱されて20年ぐらいは経ってるのにな。これ楽天の… https://t.co/SzE4pm2a0x ->
  • というのも、WEB系開発とかの領域だと定番化してるみたいだけど、同じソフトウェア開発でも他の分野ではあまり使われてなさそうだから。ましてや他の産業ならなおのこと(相性もあるだろうし) in reply to K_akiya ->
  • TrelloとSlackを「最新」と紹介するのも「えっ?」て感じだし、それがバズるのも「えっ?」て感じだわ。 ->
  • 大学の時の企業アンケートで業務に使用しているコミュニケーションツールに「チャットツール」って選択肢作ったんだけど、恩師に削除されてしまったな。同じ講義を取ってる学生からも異論なしで削除。流石に15年前にメッセンジャー使って仕事して… https://t.co/FFRRSUhjQe ->
  • 自分はIRCやMSNメッセンジャーみたいなのを想定したんだけど、2000年代に「チャット」って言ったら皆、そんなの想像しないよね。 in reply to K_akiya ->
  • でも皆、今つかってるでしょ「チャットワーク」自分はあまり好きじゃないけど。 in reply to K_akiya ->
  • RT @hologon15: 十勝毎日新聞の号外、出た。 https://t.co/0LFkUAcK6E ->
  • ロシアの陸軍が概算100万人でアメリカ陸軍の倍ぐらいあって「もう先進国では徴兵で沢山の歩兵部隊を揃えてる国も少ないだろ」と思ったんだけど……中国陸軍を完全に忘れてたね、それでも100万人ぐらいか。 ->
  • 冷戦時代は、また独ソ戦みたいに欧州の大平原でワルシャワ機構軍vsNATOの大戦車部隊がカチ合うみたいな想定で、東西の両陣営が軍備をしてたから、陸軍の人員が凄い数だったらしいんだよ。 in reply to K_akiya ->
  • RT @zakone: 買い出し https://t.co/XCIjnyl9M0 ->
  • RT @kaatsukun: 十六夜リコ先生には自分の身体に魔法をかけているとの噂が絶えませんが…リ、リコ先生がそんなことするはずがないんだ~ッ!!! https://t.co/VUhKtSVnaZ ->
  • RT @dongurimasako1: 令和もよろしくね
    #イラスト #イラスト通り #オリキャラ https://t.co/UyomYx8EQT ->
  • RT @kagefumimaru: 三種の神器とその形代の経緯(稲田智宏『三種の神器』より) https://t.co/vwV4vXisYo ->
  • RT @ree_kkr: ☂️🐡❄️ https://t.co/tMpnutFo74 ->
  • RT @YUlRl_Na: 黒タイツJK愛宕さん☕️ #アズールレーン https://t.co/ASnxNAWrhw ->
  • RT @OHLAND2733: [絵]夏のスカサハ☺️ https://t.co/Ov4o3I8IY1 ->
  • RT @yuzuyu7cat: Get Ready
    #FGO https://t.co/Nh8plbiPDj ->
  • RT @udon0531: ジャージ
    (お題箱) https://t.co/hg39ANPm7k ->
  • RT @nayutasu15: いつかツイッターで見かけた制服のアビーちゃんが可愛すぎたので描きました。久々のお絵かき楽しかったです。 #FGO https://t.co/kTFHvoTThq ->
  • RT @Victim_Girls: 貧乳の子がSUGOIDEKAIシャツを着ているのってSUGOI可愛くないですか? https://t.co/vCX9nz3GdX ->
  • RT @baku_dreameater: 今日も一日 https://t.co/hnDUAeTo8U ->
  • RT @aoigasane_06: @iloha_train 未成線趣味の私「行政文書に存在してからが本番」 ->
  • RT @ninamorieri: はるりさ漫画【晴ちゃんは中学生4】
    晴と梨沙とピクニック
    晴ちゃんと梨沙が中学生になったら
    というifのお話しです(*´ω`*)
    #晴ちゃんは中学生 https://t.co/Em0AI34a0V ->
  • RT @itokzdwi: BL好きの社会人同人オタクが友達のオタクを連れてラブホに行く話。(コミティア新刊)① https://t.co/XjbNbpiLiZ ->
  • RT @arayada_mengo: 水着ななーはー
    令和もよろしくおねがいします
    #久川凪 #久川颯 https://t.co/GPwuRQJT9o ->
  • RT @engadgetjp: Firefoxのアドオンが無効化される不具合が発生中。新規ダウンロード、インストールも不可
    https://t.co/24tsKjhPBS ->
  • RT @ncaq: Firefoxのアドオンが無効化された原因はアップデートではありません
    認証のトラブルなのでおそらく数時間~1日の範囲で治るかと思われます ->
  • 昼寝から起きたらFireFoxのアドオン全滅してて焦るわ、待ってれば直りそう。 ->
  • RT @nekop: Dockerとやんちゃなコンテナプロセス https://t.co/g0ctKoZROu ->
  • RT @urajirogashi: https://t.co/Fzgw8H5e0N ->
  • RT @4ori_41: 進捗☕ https://t.co/1rtUPmd1k4 ->
  • RT @hokunan1341: ばいばい北海道 https://t.co/yUXKmG5Rpf ->

テーマカスタマイザーに自由にカスタマイズ項目を追加する方法

このブログのテーマ、shirohanadaに実装している「コンテンツ背景色」のカスタマイズ項目の追加方法について解説します。

カスタムヘッダーでヘッダー画像を自由に変えられるようにしたところ、期せずしてヘッダー色のカスタマイズも付随していたので、背景色とかもカスタマイズ可能にしました。

「コンテンツ背景色」はshirohanadaで独自に追加したカスタマイズ項目です。投稿の背景色などデフォルトで薄いグレーを敷いている部分の色が変更できます。テーマカスタマイズAPIを使うと、割と簡単に自由にカスタマイズ項目が実装できます。

基本的にはWordPress Codex テーマカスタマイズAPIに沿って実装していきました。

目次

テーマカスタマイザーの仕組み

  1. functions.phpにカスタマイズ項目を追加する設定を書く
  2. ダッシュボードの「外観」→「カスタマイズ」から、スタイルを変更する
  3. 変更した内容はoptionsテーブルのtheme_mods_テーマ名 レコードに格納される
  4. functions.phpでカスタマイズの内容を読み出してCSSを作る
  5. ヘッダーにインラインCSSとして出力する
  6. style.cssはカスタマイズしたスタイルで上書きされる

ざっとこういう具合です。

コントロールの追加

まず、「コンテンツ背景色」という名前のカラーピッカーを表示する設定をfunctions.phpに書きます。

  • $wp_customize->add_setting( args )
  • $wp_customize->add_control( args )

この2つの関数がテーマカスタマイザーの呼び出し時に実行されるよう、add_action('customize_register') で指定してます。

add_settingでの設定

まずはadd_setting関数から。

新たに作るカスタマイズ項目の設定を$wp_customizeオブジェクトの関数add_setting()に引数で渡します。ここで設定しておくとget_theme_mod( ‘ID’ )でカスタマイズした設定を取得できて、後々で楽になります。

$wp_customize->add_setting(
    'contents_bg_color',
     array(
        'default' => '#f8faff',
        'transport' => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
    )
);

引数の内容は

  • ID(テーマ内で一意な識別名): contents_bg_color
  • 配列
    • デフォルト値:#f8faff
    • カスタマイズ画面での更新用の設定:refresh
    • 呼び出し時に実行するサニタイズの種類:sanitize_hex_color

設定内容の保存先をoptionsテーブルか、optionsテーブルのtheme_mods_shirohanadaレコードか指定できます。デフォルトではtheme_modsレコードに保存なので、今回は指定しません。

optionsテーブルへの保存を指定するとカスタマイズ項目1つにつき1レコード生成されると思いますが、特にメリットもなさそうなのでテーマのカスタマイズ関係はtheme_modsに固めています。

transport設定は、とりあえずrefreshでいきます。この設定だと、色を変えた時にプレビュー画面が数秒フェードアウトしてしまいますが、ちゃんと使えます。別途jQueryを書いたjsファイルを用意しておくとプレビュー画面でフェードアウトなしの再描画をしてくれます。

sanitize_callbackは、新たに作りたい項目が色なので16進カラーに適用するサニタイズを指定します。

参照:https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting

add_controlでの設定

同様にadd_control関数に、コントロールを表示するための設定を渡します。今回は色の設定になるので、カラーピッカーを使えるように引数を組みます。他にもテキストエリア、ラジオボタンやセレクトボックスなどが指定できます。
参照: https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control

Usageなんかを参考にして、下記のコードを書きました

$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize,
                'contents_bg_color',
                array(
                    'label' => 'コンテンツ背景色',  
                    'section' => 'colors',
		)
	)
);

カラーピッカーの場合は、ちょっと特殊でWP_Customize_Color_Controlクラスのインスタンスを引数にします。

で、add_control()関数にオブジェクトを渡す場合は、引数は1個でOK。
IDとかラベルはWP_Customize_Color_Controlクラスのコンストラクタ引数で指定します。

  • 第一引数 コントロールマネージャーのオブジェクト $wp_customize
  • 第二引数 テーマ内で一意なID(識別子)
  • 第三引数 配列 オプショナル、デフォルトの設定の上書きに使う

第三引数の配列は new WP Customize_Contorol()で渡せる内容と同一のようです。
今回はラベルとセクションだけでいいです。配列にsettingsがない場合はIDで一致するカスタマイズ設定を取得&書込してくれます。なので、先ほどadd_setting() で指定したのと同じIDを入れておきます。

今回はラベルとセクションだけでいいです。配列にsettingsがない場合はIDで一致するカスタマイズ設定を取得&書込してくれます。なので、先にadd_setting() で指定したのと同じIDを入れておきます。

settings
All settings tied to the control. If undefined, `$id` will be used.

https://codex.wordpress.org/Class_Reference/WP_Customize_Control

labelはコントロールの表示名です。

sectionは「基本情報」「ヘッダー」「色」などの区分のうち、どこにコントロールを入れるかを指定します。sectionを新たに作ることもできます。

WP_Customize_Color_Controlクラスのインスタンス引数とか、Codexに説明がなくてコアのコードを見てきたので、まず合ってると思います。
調べた際の記事はこちら:テーマカスタマイズ関係でWordPressコアのコードを調べた

add_actionでフック

カスタマイズ項目を追加するための最終的なコードは下記の通りです。
add_actionに渡す関数(下記コードではcontents_bg_customize_register)は、引数に$wp_customizeを取ります。WordPress本体が使用しているグローバル変数です。

function contents_bg_customize_register( $wp_customize ) {
	$wp_customize->add_setting(
		'contents_bg_color', 
                 array(
			'default' => '#f8faff',
			'transport' => 'refresh',
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'contents_bg_color',
			array(
				'label' => 'コンテンツ背景色',
				'section' => 'colors'
			)
		)
	);
};
add_action( 'customize_register', 'contents_bg_customize_register' );

CSSの生成とヘッダーへの埋め込み

カスタマイズ項目が追加できたので、これを読み出してCSSを生成します。生成したCSSはadd_actionで<head>に埋め込まれるようセットします。
ヘッダーにインラインで埋め込まれるため、外部ファイルであるstyle.cssより優先度が高くなります。

カスタマイザーで設定した値を取得するにはget_theme_mod()関数を使います。

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color:<?php echo get_theme_mod('header_color', '#000000'); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

このようにCodexにあるような書き方でもいいですが、自分はヒアドキュメントを使って書きました。
ヒアドキュメントでCSSを書いて変数に入れてしまう方が読みやすいと思います。ただし、echoで出力する際にエスケープ処理が必要になります。(WordPressコーディング規約に準拠させるなら)

function customizer_css_output() {
	$bg_color = get_background_color();
	$contents_bg_color = get_theme_mod( 'contents_bg_color', '#f8faff' );
	$style = <<<CSS
<style type="text/css" id="shirohanada-customizer">
	body { background-color : #$bg_color; }
	.side-widgets,
	.page-title,
	.pagination,
	.nomatch-contents,
	.link-posts p,
	.type-page,
	.type-post {
		background-color : $contents_bg_color ;
	}
</style>
CSS;
	$allowed_style_tag = array(
		'style' => array(
			'type' => array(),
			'id' => array(),
		),
	);
	echo wp_kses( $style, $allowed_style_tag );
}
add_action( 'wp_head', 'customizer_css_output' );

get_background_color()はカスタムバックグラウンド機能で指定した色を取得します。これはBody要素に適用するので、一緒に読み出して設定してしまいます。

get_theme_mod( 'contents_bg_color', '#f8faff' )
第一引数にIDを指定します。add_setting/add_controlで指定したIDをセット。これだけでoptionsテーブルのtheme_mods_shirohanadaレコードから、該当するIDの設定値を取得してくれます。設定値が空の場合、第二引数のデフォルト値が使われます。

wp_kses( $style, $allowed_style_tag )
wp_kses()関数でエスケープ処理をします。第一引数にCSSヒアドキュメントを格納した変数、第二引数にタグ・属性の配列を渡すと、指定したタグ・属性のみをそのまま出力してくれます。今回はスタイルタグと、type・idを出力して欲しいので上記のような配列を作って引数として渡しています。

実際にヘッダーに出力されるCSSは以下の通り。

本番用はカスタムヘッダーの設定も一緒に取得&出力している

完成

add_settingの設定時に説明したように、カラーピッカーで色を変えるとプレビュー画面が数秒フェードアウトしてから反映されます。

テーマカスタマイズAPI ステップ 2: JavaScript ファイルの作成で説明されているように、更新用jsファイルを用意すれば、WordPressがデフォルトで用意しているカスタマイズ項目のように、フェードアウト無しで一瞬でプレビューが描画されます。

$wp_customize->add_controlの引数がやや複雑ですが、非常にシンプルな記述でオリジナルの項目を作成できます。