Ellinikonblue.com Weblog

「 日本語表示に配慮したコーディング向けフォント『 Source Han Code JP 』v2 が公開」 （ 窓の杜 より）

　最近、徐々にエディターとして Atom を 使うことが多くなってきています。
　そんな高度な使い方をしているわけではないのですが、 なんと言っても Windows でも Mac でもまったく同じものが使えるというところが大きく、 また Portable Apps 版の Atom も見つけたので、 いよいよ Windows でも Atom への 依存度が高まってきたわけです。 　ただこれまで Windows であまり Atom を 使ってこなかった理由の一つは、フォントの表示があまりきれいではなかったことがあげられます。

　文書を書くにしろ、ソースコードを書くにしろ、 長時間、文字ばかりのエディターの画面を見ているときに、フォントがきれいでないと疲れが助長されるので、 なんとかならないかと思っていたところ、上記の記事を見つけました。

　実際試したところ、実にきれい（ Windows でしか試していません）

　ダウンロードしてきたアーカイブを解凍してできた OTF フォルダ以下にあるフォントを すべてインストールして、Atom の設定で、 フォント (font-family) として「 Source Han Code JP 」と設定すればおっけー (^^)b

　Windows で Atom を使っていて、 同じ理由で残念感を味わっている方は是非お試し下さい m(_ _)m

• adobe-fonts/source-han-code-jp · GitHub
• Atom

「 Microsoft 、ブログ投稿ツール『 Windows Live Writer 』をオープンソースに」
「 “WordPress.com” の Windows 版アプリが公開、自前管理の『 WordPress 』でも利用可能
（以上、窓の杜 より）

　昨今、ちょっと WordPress を触ることがあって、 まぁよく聞かれることが「オフラインで編集はできないのか？」と言う質問。

　blosxom 使いの私としては 「んなもん、テキストエディターでがりがり文章書いて、体裁だけウェブ上で整えれば…？」と思うんです w けど、これはたいてい却下されます。

　Windows Live Writer で云々という話は、検索すると出てくるのですが、 もうアプリケーション自体が古くてやめといた方が…と言う話を何度かした昨今、 上記の記事を見かけました。

• Open Live Writer · GitHub

　また最近、Windows 10 を HP の Pavilion x2 10 を購入して、 本気で使い始めたのですが、それも相まって Windows アプリ版の記事も気になりました。

　ただしこちらの方は WordPress.com の サービスで使うことがまず前提で、 自前の WordPress サイトで使いたければ、 Jetpack by WordPress.com という プラグインのインストールが必須になります。

　残念ながら、個人的に関わっている WordPress サイトでは このプラグインを使っていないので、わざわざ Windows アプリを試すためだけに、 プラグインを追加するのもどうかなぁ…と思ってまだ試していません。

　まぁ個人的に WordPress を 使用しているわけではないので、記事を編集することも今はないわけで、 必要に差し迫られたときのためのメモとして、このエントリーを書いておきました ^^;A

　WordPress のテーマである Graphy のページめくり機能を強化する際、 以下のサイトを参考にさせていただきました。

CrystalSnowman.com 「 WordPress プラグインを使わずに簡単にページネーション (ページング) を追加する方法」

　ただし、ページめくりのコードがあるすべてのテーマを構成するファイルに、 上記サイトで紹介されているコードを挟み込んだわけではありません。

　もともと Graphy にも ページめくりの機能があって、これは inc/template-tags.php 内に graphy_paging_nav() と言う関数として定義されています。

　ここがほんとにこの Graphy と言うテーマの 良く出来ているところで、この graphy_paging_nav() と言う関数、上書き (Override) されることが 想定されて書かれています。
　要はこの関数を（適切な形で）定義し直してやれば、 テーマを構成するファイルのあちこちに散らばるページめくりの部分の機能を 書き換えてしまうことが出来るのです。

　と言うわけで、カスタマイズしている子テーマの functions.php ファイルに、 新しい graphy_paging_nav() 関数を以下のように定義し直し、末尾に追記しました。

function graphy_paging_nav() {
	// Don't print empty markup if there's only one page.
	if ( $GLOBALS['wp_query']->max_num_pages < 2 ) {
		return;
	}
	$args = array (
		'prev_text' => '<i class="fa fa-chevron-circle-left"></i> NEXT',
		'next_text' => 'PREV <i class="fa fa-chevron-circle-right"></i>',
		'show_all'  => false,
		'mid_size'  => 2,
	);
	?>
	<!-- pagination ------------------------------------------------>
	<div class="pagination-area">
		<?php the_posts_pagination( $args ); ?>
	</div><!-- .pagination-area -->
	<?php
}

これだけで Graphy の ページめくり機能の強化に成功しています（のようにみえます）。

　いやぁほんと久々に良く出来ているものって、細部にわたってまでよく考えられているものだと、 感心しました。

　さて、パンくずナビゲーション、ページめくりと機能強化を中心にカスタマイズしてきて、 最後は見栄えの整形、簡単ではありますが、 CSS の調整をポイントを最後にまとめておきたいと思います。 Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識： Graphy カスタマイズ #5 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #4 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

　WordPress を Graphy と言うテーマを使ってカスタマイズする場合、 どちらかというと、これまでで説明したパンくずナビゲーションがあるかないかは趣味の問題というか、 特に問題を感じない方もいると思いますが、ページめくり (pagination) に関しては、 結構な数の方が Graphy を使っていだすと、 すぐに不満に感じるところではないかと思います。

　正直、Graphy を使うとなった時点で、 一番問題となったのはこの機能が貧弱なことでした。

　Graphy にも、 ページ一杯に記事を表示したときに、過去の記事に遡るために「古い投稿」、 より新しい記事に戻るために「新しい投稿」というリンクはでるのですが、 デフォルトだと 10 個の記事ごとにしかページめくりが出来ません。

　JetPack というプラグインを使って、 無限スクロール (Infinite Scroll) させることもできますが、 根本的に大量の記事を蓄積していった場合、昔の記事ほどたどり着きにくいというサイト構造になってしまいます。

　そこで今風のページめくり機能、最新、最古のページにも数クリックでたどり着け、 その間のページにも出来るだけ少ない遷移でたどり着ける、 このブログ でも 実装しているようなページめくり機能を追加してほしいと言われて、結構悩みました。

　実はこのようなページめくり機能もプラグインで実現することは出来ます。
　ただ今回はこれというプラグインを見つけられなかったこと、 それともう一つ、もとの Graphy 自身の持つ ページめくり機能を無効化してしまうことが、予想以上に手間取りそうだと言うことで、 プラグインに頼ることはやめました。

　調べていくうちに望んでいるようなページめくり機能を実装するための関数が、 実は WordPress にあらかじめ用意されていることを知り、 またそのあと、Graphy をなんとか無効化できないかと、 テーマを構成するファイルをあれこれ眺めていたときにひらめいたので、 この機能は自力で実装することに決めました。

　ただし、この実装方法、Graphy 以外の テーマでの転用は少し難しいかもしれません。

　具体的な方法は次回 (^^)/

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識： Graphy カスタマイズ #4 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

「 Windows 10 初のメジャーアップデートが一般公開」 ～日本語版でもコルタナが利用可能に
「 Windows 10 インストール用イメージも Build 10586 に差し替わる」 ～ 7/8/8.1 のプロダクトキーでクリーンインストール/アクティベーション可能
（以上、 PC Watch より）

　Windows 10 がリリースされて初のメジャーアップデートが行われました。
　以前にも話題にしましたが、これで Windows 7 の プロダクトキーがあれば、Windows 10 をクリーンインストールできるようになりました。 　個人的な話ですが、Windows 10 環境への移行障壁だった地上波デジタル TV の視聴環境も、 nasne を手に入れ、 Windows 7 でですが、快適に TV を視聴できる環境も完成しました。
# タブレットでも見れて非常に便利です (^^)b 　さぁ SkyLake へ！
…とはいかず w 、今年の 7 月に本業でシステムエンジニアとして復帰させられたもので、 持ち歩くための Windows PC がほしく、今、物色している最中で、年末までには手に入れたいと思っています。

　と言うわけで、 SkyLake プラットフォームに我が家のメインデスクトップを入れ替えるには、 冬のボーナスでは予算が足りなくなりそうです orz

　また当面、使うものですから、安物買いの銭失いは避けたく、 来年の夏のボーナスくらいをあてにして、デスクトップ環境を刷新したいと思っています ^^

　ひとまず年末買う（予定の）Windows 10 PC で、 しっかり経験値を積んで、デスクトップ環境を整えるときの糧にしたいと思っています。

「 バグ修正が進んだ Windows 10 Insider Preview 『 Build 10586 』」 ～ Surface Pro 3 のシャットダウン問題などを修正 （ PC Watch より）

Ellinikonblue.com Weblog
「 Skylake までの長い道のり… #1 」
「 Skylake までの長い道のり… #2 」
「 Skylake までの長い道のり… #3 」
「 まずは nasne を買いました」

　前々回のエントリーで、親テーマ（ Graphy ）と 同じ動作をする子テーマを作成し、前回のエントリーで Breadcrumb NavXT という プラグインをつかって、ページの上部にパンくずナビゲーションを表示する方法まで説明しました。

　では実際に子テーマをカスタマイズして、パンくずナビゲーションを表示させます。

　勘の良い方は、すでに子テーマの作成を説明したときにお気づきかもしれませんが、 親テーマと同じ動作をする子テーマを作成するだけなら、 ディレクトリを作って、その中に style.css と functions.php というファイルを 作成するだけで出来てしまいます。
　なぜたった二つファイルを作成するだけでこうなるのかというと、 基本的に子テーマはテーマを構成するために必要なファイルがなければ、 親テーマのファイルをそのまま使うからです。

　つまり、オーバーライドしてしまうファイルだけ親テーマからファイルをひっぱってくればいいので、 wp-content/themes/graphy ディレクトリから header.php と言うファイルを一つ、 wp-content/themes/graphy-custom ディレクトリにコピーします。
　今回はそのコピーしたファイルの末尾に Breadcrumb NavXT プラグインが指定する 以下のコードを付け加えました。

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

　基本はこのように親テーマからカスタマイズして上書きしたいファイルを 子テーマへコピーしてカスタマイズしていくのですが、例外があります。
　それが子テーマ作成の時に最初に作った style.css と functions.php です。

　style.css は最初に子テーマのためのメタ情報を書いてしまうので、 このままですと親テーマのスタイルシートを読み込まないので、 functions.php ファイルにおまじないのコードを書くわけです。
# おまじないは子テーマ作りの時に functions.php に書いたコードです。

　ただ functions.php は違います。
　このファイルはたとえ子テーマに同名のファイルがあっても、 先に親テーマの functions.php は必ず読み込まれます。
　親テーマの functions.php が読まれてから、子テーマの同名のファイルを読み込むという動きをするので、 基本、子テーマでは追加したい機能だけをここに追記すればいいことになります。
　ただし、このような動きをするために、親テーマが functions.php に記載して実現している機能は、 削除できないと思った方がいいでしょう（やれば出来ないことはないです）。

　あとは追加したパンくずナビゲーションのためのスタイルシートを追記してやればいいのですが、 このあたりの見栄えの微調整は、ページめくり機能のカスタマイズを説明したあとにまとめてします。

　では次回からはページめくりの機能追加（と言うより機能強化）について説明します。

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識： Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

　前回までで、親テーマと同じ動きをする子テーマを作るところまでお話ししましたので、 いよいよこの子テーマに対して、手を加えていきます。

　まずはパンくずナビゲーション （breadcrumb list）を付加する方から。
　今回採用した Graphy と言うテーマ、 ほぼ唯一と言っていいほど、今時のページ構成を考えると「なぜないんだろう」と思える機能で、 備わってないのが、このパンくずナビゲーション。
　パンくずナビゲーション、もしくはパンくずリストは 個別ページを見たときに、サイト内での位置を示し、サイト内での遷移をサポートするものです。

　WordPress の場合、 テーマがこのパンくずナビゲーションの機能を備えていなくても、 この機能を実現する方法はいくつかあって、今回は Breadcrumb NavXT という プラグインの力を使って実装しました。

　そんなに複雑な機能を提供するプラグインではないですし、 Breadcrumb NavXT の 設定に関しては、以下のサイトをご参照下さい。

AdminWeb 「 Breadcrumb NavXT プラグイン（パンくずリストの表示）」

　問題はこのプラグインを導入すると、生成されるパンくずナビゲーションを表示させるために、 以下のコードを適切な位置に挿入しなければいけないところにあります。

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

　通常、 WordPress のテーマを構成するファイルは 多数のファイルで構成されており、例えば、今回例に挙げている Graphy だと 60 ファイルくらいあります。
　この中から適切な場所に表示するためには、どのファイルを変更すれば良いのか？ ある程度、テーマがどういう仕組みで構成されているのかわかっていないと出来ません。

　事前にページの上部に表示させることを決めていたので、 header.php を触れば良さそうだということはなんとなくわかったので、 今回は事なきを得ましたが、このようなテーマをカスタマイズしなければ 機能を提供できないプラグインの採用は、 よくよく WordPress のテーマの仕組みを 理解していないと難しいと思います。

　では実際、前回、たった二つのファイルしか作らなかった子テーマを、 どのようにカスタマイズしていくのか、次回、具体的に説明します。

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識： Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

　WordPress でサイトの見栄えを変更するために、 「テーマ」という仕組みが用意されていますが、前回、WordPress 仕事をした際、 Graphy というテーマを ベースにしてサイトを構築しました。

　前回のエントリで WordPress でテーマをカスタマイズしていくときは、 「子テーマ」という独特の作法があって、今回も Graphy の 子テーマを作ってこれをカスタマイズしました。

　なぜ「子テーマを作る」などという手数を踏むかというと、 昨今、 WordPress にはオートアップデート機能があって、 本体はもちろん、プラグイン、テーマもこのスキームで最新のバージョンを簡単に維持することが出来ます。

　ただ、テーマがアップデートされると、カスタマイズした部分との差分だけがアップデートされる…なんてことは当然なく (^^; 、 このため子テーマを作っておけば、親テーマがバージョンアップしても影響が最小限に抑えられ （理由はあとあと説明します）、最悪、親テーマに戻せば大きく表示が崩れることも防げます。

　子テーマ作りはさほど難しくありません。
　WordPress がインストールされたディレクトリには、 wp-content/themes と言うディレクトがあり、基本、 WordPress で使用する テーマのファイルはすべてこれ以下にあります。
　まずこの wp-content/themes ディレクトリに子テーマのためのディレクトリを新たに作成します。
　今回は Graphy の子テーマを作成を例にしますので、 ここでは graphy-custom と言うディレクトリを作成したとします。

　次に作成した graphy-custom ディレクトリ直下に style.css という CSS ファイルを一つ作成します。 中身は以下の通りです。

/*
Theme name: graphy custom
Template:   graphy
*/

　Theme name には作成する子テーマの名前、Template は親テーマの名前です。

　次に 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' );
}

実は親テーマとまったく同じ動作をする子テーマの作成作業はたったこれだけで終了です。

　ここまでの作業が終了すれば、新たに作成した子テーマを WordPress の管理画面から選択できるようになります。

　ここからカスタマイズした部分の説明をしていくことにします。 Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

　前回、WordPress のサイトを構築する際、 ほぼ唯一と言っていいほど、改めて知識を収集して対応した作業が、 「テーマのカスタマイズ」でした。

　テーマとしては Graphy という タイポグラフィにこだわったシンプルなテーマで、シンプルなだけにデザイン的に手を入れる余地もあり、 「真っ白なキャンバス」のように見えたのが、採用にいたった一因です。

　ただそのまま、何も手を加えずに使っているかというとそうではありません。

　これは何も Graphy という テーマの問題ではなく、 WordPress という仕組みそれ自体の 自由度がもたらす問題で、「プラグイン」というロジックの拡張の仕組みと、 「テーマ」というデザインの変更の仕組みをもちながら、これらが完全に独立しておらず、 例えば「テーマ」にロジックを組み込んでしまうことが出来ます。

　これの何が問題かというと、選ぶテーマによって、 機能的に出来ること出来ないことがあって、選んだテーマによっては、 プラグインと機能が重複してしまう、もしくはテーマに手を入れなくては プラグインが使えなくなってしまいます。

　前回のエントリでも書きましたが、WordPress では、 テーマを切り替えることで見栄えだけは簡単に変わります。
　ただ、機能性まで考慮に入れると、特定のテーマを前提に導入するプラグインを決めるので、 実質、見栄えだけのためにテーマを変えるということはおいそれと出来ないということです。

　と言うことで、前回、選んだこの Graphy と言うテーマ、 結構、機能的にも良く出来てはいるのですが、 いろいろディスカッションしているうちに、以下の機能を実装するためにテーマに手を加えざる得なくなりました。

1. パンくずナビゲーション （breadcrumb list）
2. ページめくり (pagination)

　またこのようにテーマをカスタマイズする際、「子テーマを作る」という WordPress 独特の作法があります。

　ということで、まずは子テーマ作りから話をまとめます。 Ellinikonblue.com Weblog 「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」

　先般、WordPress でサイトを構築すると言う経験をさせてもらって、 そのおかげということは全くないのですが、また近々、 WordPress でサイトを構築する、 今度は半分お仕事をすることになりそうになってきました。
　とは言っても、今度はインターネットにオープンなサイトではないので、 気は楽なのですが、やっぱりプラットフォームの設定から、 WordPress で見栄えをそこそこ整えるところまでは、 やらざる得ない状況です。

　前回のときに、学んだことを何一つ残してない （ Docker 話ばかりだったような気がする）ので、 ちょっと WordPress 的な、 機能的なことは、ほぼプラグインで出来てしまうことが多いので、 特にその見栄えに関するところで、学んだことを少しまとめておきたいと思います。

　ご存じの通り WordPress は 「テーマ」を切り替えることで、その見栄えを簡単に切り替えることが出来ます！… なんてよくマニュアル本に書いてありますが、 ほんと見た目だけは変わります。
　ただ昨今、それで SEO 的に良い構造なのか、 このスマートフォンファーストな時代、レスポンシブな構造になっているのか、 サイト内でユーザーが遷移する際、十分な機能性を提供できるかなどを考えると、 その要求条件を満たす「良く出来たテーマ」は限られています。

　しかも、日本語サイトの場合、特にアルファベットなどとは文字の間隔の取り方などいわゆる 「タイポグラフィ」まで気にし始めて CSS をこねくり返すよりは、 やはり日本人が作成したテーマをベースにした方が良いと判断して、 前回最終的に候補にしたテーマは以下の三つでした。

• STINGER3
• Xeory
• Graphy

　前回、最終的には、適当に作り込んだサイトで、ぱちぱちと切り替えて、 「 Graphy 」でいこう！ となったわけですが、私個人は最終的には「そのまんまを使えるわけがない！」と思っていたので、 この時点ではノーコメントで、完全に依頼主の好みだけの問題でした。

　しかしながら、こういう経緯で採用した Graphy というテーマ。 本当に良く出来ていて、実は機能的には数カ所しか手を加えていません。
# 今や見栄えはほぼ別物ですが…

　ただこの Graphy を ほんの少しですがカスタマイズしたときに得た知識は、 今後、WordPress 仕事をする際に役に立つのではないかと思っています。