WordBench 京都 2017/02
Starter Contentで
WordPress構築を効率化

Digitalcube Developer
Hidetaka Okamoto
• W o r d B e n c h 京 都 モ デ レ ー タ
• W o r d P r e s s 日 本 語 フ ォ ー ラ ム 世 話 役
• W o r d C a m p Ky o t o 2 0 1 7 実 行 委 員 長

今日の流れ
・スターターコンテンツとは？
・スターターコンテンツの使い方
・コードサンプルの紹介

スターターコンテンツとは

Twenty Seventeen (WP4.7デフォルトテーマ)
https://wordpress.org/themes/twentyseventeen/

WordPress立ち上げ直後の状態
ブログ記事一覧が表示された「デフォルト状態」

管理画面からカスタマイズ画面を開く
プレビューのサイト表示がさっきと異なっている

そのまま保存すると
プレビュー画面で見たサイト構成に切り替わっている

これが
スターターコンテンツ

固定ページや
メニュー
ウィジェットも
自動生成

これまでのWordPressサイト制作
• 良さそうなテーマを探してインストール
• スクリーンショットと初期表示が違う
• スクリーンショットの表示に頑張って近づける
• 「思ってたのと違うから他のにして」
• テーマを変える
• 「さっきのテーマと設定方法違うんだけど」

めんどくさいから
自分で作っちゃえ

自分で作った結果
• 「WordPress更新したら壊れました」
• 「プラグイン追加したのに表示変わんない」
• 「なんかバグってます」
• 「そろそろデザイン変えたいし、保守内でヨロ」

めんどくさい
つらい

うち保守やんないから
大丈夫っす

東京地方裁判所判決／平成２３年（ワ）第３２０６０号
平成２６年１月２３日
ウェブサイトによる商品の受注システムを利用した顧客
のクレジットカード情報が流出した
事故につき、システムの設計、製作、保守等の受託業者
の債務不履行に基づく謝罪・問合せ
等の顧客対応費用、売上損失等の損害賠償責任が肯定さ
れた事例
http://www.softic.or.jp/semi/2014/5_141113/op.pdf

納品物に
既知の脆弱性があると
責任問題になりうる

WordPressの
初期セットアップは
すごく大変だった

The part of
NUX(new user experience.)
that I would like to start tackling in 4.7
is
initial site setup
https://helen.wordpress.com/2016/07/13/theme-disconnect-and-discontent/

Twenty Seventeen (WP4.7デフォルトテーマ)
https://wordpress.org/themes/twentyseventeen/

スターターコンテンツのあるWordPress
• 良さそうなテーマを探してインストール
• スクリーンショットの内容がプレビューできる
• 「思ってたのと違うから他のにして」
• テーマを変える
• スクリーンショットの内容がプレビューできる
• 気軽にテーマを試せる

スターターコンテンツ
の
使い方

管理画面からカスタマイズ画面を開くだけ
スターターコンテンツがある場合は、プレビュー画面の表示がデフォルトじゃなくなる

Tips1:スターターコンテンツは初期状態のみ
• wp_optionの`fresh_site`で判定している。
• 一度サイトを編集すると利用できない。
• もう一度利用するためにはfresh_siteを変更する
$ wp option update fresh_site true
or
<?php update_option(‘fresh_site',1); ?>

スターターコンテンツは
コアに定義されているので、
どのテーマでも利用可能

コアに定義されている
$core_content = array(
'widgets' => array(
'text_about' => array(
'text',
array(
'title' => _x( 'About This Site', 'Theme starter content' ),
'text' => _x( 'This may be a good place .’ ),
)
),
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/
theme.php#L1938

Twenty Sixteenにスターターコンテンツを適用
カスタマイズ画面でテーマを切り替えないと、wp optionが更新されて表示されない

今のところ、
スターターコンテンツ
対応テーマ
を調べる方法はない

スターターコンテンツ
の
コードの話

注意
スライドの関係上、
スライド上のサンプルコードは
不完全です。

基本的な書き方
add_theme_support(
'starter-content',
[
'posts' => [],
'attachments' => [],
'options' => [],
'nav_menus' => [],
'widgets' => []
]
);
add_theme_support( starter-content , <連想配列> );

固定ページを追加する
add_theme_support(
'starter-content', [
'posts' => [
'home',
'about',
'contact',
'blog',
],
]);
home / about / contact / blogの固定ページが
それぞれ存在しない場合に自動で生成する。

記事内容を詳細に定義する
add_theme_support(
'starter-content', [
'posts' => [
‘custom_post' => [
'post_type' => 'post',
'post_title' => 'Hello, Dolly',
'post_name' => 'example-blog-post',
'post_content' => "Hello, Dolly",
'comment_status' => 'closed',
]
postsの中身を連想配列にすると、記事内容を設定できる

ファイルをアップロードする
add_theme_support( 'starter-content', array(
'attachments' => array(
'featured-image-logo' => array(
'post_title' => 'Featured Logo',
'file' => 'assets/images/featured-logo.jpg',
),
),
'posts' => array(
'about' => array(
'thumbnail' => '{{featured-image-logo}}',
),
attachementsの配列キーを{{KEY}}のようにすることで、
thumbnailを設定できる。

フロントページを設定する
add_theme_support(
'starter-content', [
'options' => [
'show_on_front' => 'page',
'page_on_front' => '{{home}}',
'page_for_posts' => '{{blog}}',
],
'posts' => [
'home',
'blog'
],
options に{{POST_NAME}}を渡してフロントページを設定できる

メニューを設定する
add_theme_support(
'starter-content', [
'nav_menus' => [
'sample_navigation' => [
'name' => __('Sample Navigation', 'id'),
'items' => [
'home_link',
'page_about',
nav_menus でメニューを定義できる
page_PAGENAME を指定すると、固定ページにリンクできる

メニューを設定する２
'items' => [
'custome_page' => [
'title' => 'Contact Page',
'url' => 'page_contact',
],
'custome_link' => [
'title' => 'Sample',
'url' => 'http://google.com',
],
],
連想配列でtitleを設定可能。
URLにすると外部サイトを指定できる

ウィジェットを設定する
add_theme_support(
'starter-content', [
'widgets' => [
'home-content-top-widget-area' => [
'search',
'archives',
],
],
]
);
widgets に ウィジェットID をキーとした連想配列で
ウィジェットを設定できる

ウィジェットを設定するその２
'text_custom' => [
'text',
[
'title' => 'Pre-hydrated text widget.',
'text' => 'Sample'
]
],
'meta_custom' => [
'meta',
[
'title' => 'Pre-hydrated meta widget.',
ウィジェットの第一引数はウィジェットタイプ
第二引数にウィジェット内容を定義できる

基本的には、
作成したテーマの
functions.phpに書く

プラグインからスターターコンテンツ
after_setup_themeのフックを利用する。
プラグイン有効化時に
update_option( fresh_site',1);
したほうがいいかも
add_action('after_setup_theme', function () {
add_theme_support(
'starter-content',
[

プラグインが作るウィジェットを使う
function myprefix_starter_content_add_widget( $content, $config ) {
if ( isset( $content['widgets']['home-content-top-widget-area'] ) ) {
$content['widgets']['front-side-top-widget-area']['b_custom_widget'] = array(
'wp_widget_vkexunit_profile', array(
'label' => 'Sample profile widget',
'facebook' => 'http://facebook.com',
'profile' => 'profile content'
),
);
}
return $content;
}
add_filter( 'get_theme_starter_content', 'myprefix_starter_content_add_widget', 10,
2 );
add_filter( get_theme_starter_content', <>);のフィルターを使う

まとめ
• スターターコンテンツで初期コンテンツを定義
• よく書くコンテンツや設定をコード化できる
• 自分用スターターコンテンツがあると便利かも
• スターターコンテンツに合わせたテーマに期待