WordPressのテーマに入ってるrtl.cssってなに？ -いるの、いらないの？- 「WordBench東京 12月勉強会」#wbtokyo

2016年12月18日(日) 東新宿のNHNテコラス株式会社にて、今年を締めくくるWordBench東京 12月勉強会が行われた。「Xmas ＆年末 LT 大会！」〜ピザとケーキとライトニングトーク〜、と題して終始がWordPressにまつわるライトニングトーク。もしかしたらケーキ出るかも？という期待とともに参加した。

Xmas ＆年末 LT 大会！

クリスマスを兼ねてまずは乾杯からスタート！つづくLT大会では、リリースされたばかりのWordPress4.7と最新テーマTwenty Seventeenはじめ、REST APIのようなテクニカルな内容や、ブログやメディアとしての活用、改ざんの事例、といった17の発表があった。
旬な情報やリアルな話題はWordBenchならでは。

…Continue reading

あなたのオリジナルテーマをWordPressのテーマディレクトリに登録してみよう#wctokyo

WordPressの楽しみのひとつに、テーマ選びがあります。
テーマディレクトリに登録されている数々のテーマから選んでインストール、コンテンツに合わせてカスタマイズしていくのがWordPressの醍醐味といえましょう。もちろん、最初からオリジナルのテーマを作り上げてしまうプロフェッショナルや、そろそろテーマ作りに挑戦したい方もおられるでしょう。

誰でも登録できる

テーマディレクトリには誰でも登録できるって、知っていましたか？
私は知りませんでした。

…Continue reading

アクセシビリティに関する .screen-reader-text クラスの使い方

WordPressの自作テーマを1年ぶりにTheme Checkしてみた。そこには新たな「REQUIRED」の文字が〜！

REQUIRED:.screen-reader-text css class is needed in your theme css. See See: the Codex for an example implementation.

.screen-reader-text というクラスのスタイルが必要なので実装せよ、とのことだ。
.screen-reader-text におぼえがないので、WordPressが付与しているクラスだろう。WordPressが自動的に付与するクラスはいくつかある。bodyタグの.home、.single はじめ、グローバルナビゲーションの .current_page_item、アイキャッチ関連の .has-post-thumbnail など。これらを利用してスタイルを場合分けすることができる。
その中でも、WordPressの公式ディレクトリにテーマを登録する場合に対応必須のクラスがある。画像に付与される .aligncenter、.alignright、.alignleft、.wp-captionなど。 いつのまにか .screen-reader-text が加わったようだ。

…Continue reading

感想「一歩先にいくWordPressのカスタマイズがわかる本」

「一歩先にいくWordPressのカスタマイズがわかる本」を著者の相原知栄子さん、大曲仁さん(ともにプライム・ストラテジー株式会社)よりいただいた。「仕組みや考え方からちゃんとわかりたい人のために」という副題がついている。

WordPressは配布テーマが豊富とされながら、自分が思い描くWebサイトにぴったり合ったテーマというのはなかなか存在しない。自分やお客さんの要望に合わせて表示する情報をコントロールしたり、より便利にしたいと思うことがかならず出てくるだろう。この本では自分が発信しようとするコンテンツにそってサイトを設計し、テーマを作り、運用することを目的としている。

…Continue reading

古いバージョンのIE対応に関する条件分岐

古いバージョンのIE(Internet Explorer)にHTML5を認識させるというhtml5.jsというものを、みなさまご利用でしょうか？WordPressでもそうでなくても、もういらないのでは？と思いつつさよならできない私です。

header.phpに書くしかなかったあのころ

WordPressのテーマを作るにあたって、
クライアントがIE9未満のバージョンであったなら、header.phpに以下を記述する。

<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->

実際にはもう必要ないかと思われるものの、公式のtwentyなんとかのテーマにも相変わらずこのように書いてある。

…Continue reading

ショートコードだって get_template_part()したい

WordPressのショートコードはHTMLを出力(echo)ではなく、返す(return)ところが要点だ。
HTMLをゴニョゴニョ生成してreturnする。とはいうものの投稿一覧を表示する場合に通常はget_template_part()でよいところ、ショートコードでこれを呼び出すとその場で内容が出力されてしまう。似たコードをfunctions.phpに書いてreturn せねばならないのか？面倒だしモヤモヤする。

なんとかショートコードでget_template_part()を使うことはできないものか？横着な私は考えた。
…Continue reading

子テーマを作ってみて気づいたWordPressのJavaScriptの依存関係

めずらしくWordPressの子テーマを作ってる。子テーマはまずCSSのカスタマイズから始まる。さらにカスタム投稿タイプやショートコードなど使いたい場合は、functions.phpを用意する。そして今回、子テーマでJavaScriptを追加しようとしてひっかかったことがある。

子テーマのJavaScript

子テーマのCSSやテンプレートは自動的に優先される。ではJavaScriptはどうか？
子テーマ(bird-child)に js/script.js を追加したい場合、

wp_enqueue_script( 'bird-child', get_stylesheet_directory_uri() .'/js/script.js', array( 'jquery' ), '1.00');

いつもの記述では思うように動かなかった。出力されたHTMLを確認すると親テーマのJavaScriptに依存しているのに、子テーマのJavaScriptが先に読み込まれてしまっているようだ。JavaScriptの順番を変更することなどできるのだっけ？と考えた。

…Continue reading

WordPressのアイキャッチの表示をフィルターフックでカスタマイズしてみる

ブログにおいて、記事タイトルの横にちょこんとした添えもの程度だったアイキャッチが、今では重要な要素となっている。WordPressのテーマでも、Twenty Tenのころにはその存在すらなかったものの、Twenty Fourteenあたりから大きく扱われるようになった。

アイキャッチを表示

WordPressのテーマでアイキャッチを表示するには、テンプレートタグthe_post_thumbnail()を使う。画像に対して表示を調整したい場合は、cssでしかできないのか？それとも、出力されるimgタグをカスタマイズすることができるのか？

…Continue reading