@uemera

2014.7.6 WordBench神戸 上村崇

WordPressでオリジナルサイトを作るための 最初の一歩的なカスタマイズテクニック

Photo by SalFalkoUsed with permission from Microsoft.

最近のオレ @uemerauemura兵庫県西宮市在住。

フリーランスのシステムエンジニアです。 WordBench神戸でよく喋ってます。

就活支援サイト "OfferBox" の開発(FuelPHP)

WordPress案件の手伝い

勉強会など

VPS構築とかインフラもやります。

ネットショップ支援 (FuelPHP、ExcelVBA)

このスライドでは、 WordPressデフォルトテーマTwentyFourteenを例にとって、 自分好みにカスタマイズしたい、でもどうすればいいか分からない、 という方のために、 自分の力で改造できるようになるための足がかり的なテクニックを ご紹介します。

WordPressに標準添付されている デフォルトのテーマ "Twenty Fourteen"

!WordPress最新版 Version3.9.1 デフォルトテーマは 他に Twenty Thirteen (2013) Twenty Twelve (2012) があります。 !ここでは最新機能が盛り込まれた Twenty Fourteen を使います。

Twenty Fourteenを改造してこんな風にしてみます。 そのやり方を紹介します。

・トップページだけ専用レイアウトにする。 ・最近の投稿、お知らせを　5件ダイジェスト表示。 ・サイドバーの表示位置を変更。 ・cssで色を変えたり。　文字の大きさを変えたり。 ・コメント記入欄をカスタマイズ

wordpress      >  wp-­‐content          >  themes              >  twentyfourteen  !にあります。 !Twenty Thirteen, Twenty Twelveも 同じ場所にあります。 !新しいテーマを作る場合も、themesディレクトリの下にディレクトリを作成することになっています。 !今回はTwentyFourteenをディレクトリごとコピーして別のテーマ名をつけてから改造します。

テーマ用のファイルってどこにあるの?

テーマファイルを自分好みに改造するということは、この中のファイルを改造するということ。 !たくさんファイルがありますが、改造する必要があるファイルはそんなに多くはありません。 (数ファイルくらい)

Twenty Fourteenを構成する ファイルの数は60くらいあります。

テーマファイルを直接編集しなくても、 管理画面上で、ある程度はテーマをカスタマイズできます。 徳本さんのプレゼン資料参照 http://www.slideshare.net/tokumotonahoko/wck2014http://wck2014sample.wordpress.com/(ただし、wordpress.com

管理画面からテーマをカスタマイズする方法。 管理画面 > 外観 > カスタマイズ でカスタマイズ用のバーが出てきます。

できること： ・サイトタイトルの変更 ・ヘッダー画像の設定・表示 ・サイドバーの表示/非表示 など (背景色の変更はできません)

ここでカスタマイズできます

しかし、管理画面から設定変更できることには限界があります。 自分好みのデザインやレイアウトにするためには、 テーマファイルを自分で変更できる力が必要になります。

・見た目の色とかフォントサイズの変更 ・トップページだけレイアウトを変えたい ・サイドバーをもっと自在に操る ・コメント欄をカスタマイズするには？

今回紹介するカスタマイズポイント お題目

見た目の色とかフォントサイズの変更

サイドバーの位置を変えるには？まずサイドバーの位置を変えてみます

.content-­‐area  {     width:  100%;  }  !#secondary  {     background-­‐color:  transparent;     float:  left;  }  !.site-­‐content,  .site-­‐main  .widecolumn  {     margin-­‐left:  222px;  }

.content-­‐area  {     width:  70%;  }  !#secondary  {     background-­‐color:  #000;     float:  right;  }  !.site-­‐content,  .site-­‐main  .widecolumn  {     margin-­‐left:  100px;  }

cssファイルの変更だけで出来ます。style.cssを改造してください。

<div  id="site-­‐header">      <a  href="<?php  echo  esc_url(  home_url(  '/'  )  );  ?>"  rel="home">          <img  src="<?php  header_image();  ?>">      </a>  </div>  <header  id="masthead"  class="site-­‐header"  role="banner">      <div  class="header-­‐main">          <h1  class="site-­‐title">              <a  href="<?php  echo  esc_url(  home_url(  '/'  )  );  ?>"  rel="home">                  <?php  bloginfo(  'name'  );  ?>              </a>          </h1>      </div>  </header>

色を変えたり、フォントの大きさを変えたりするのもCSSでできます。

ただしサイトタイトルは場所を移動させたりしました。

cssで背景色と フォントを変更

(ヘッダ画像は 管理画面で 追加しました)

header.php

見た目の色とか、 フォントサイズの変更とか、 サイドバーの位置も変更できるので、 これくらいまではほとんどcssを触るだけでなんとかなります。

トップページだけレイアウトを変えたい

TwentyFourteenトップページ専用のページはありません。 !トップページも、投稿ページと同じく最新の記事を10件表示しています。

トップページ 投稿ページ

トップページだけレイアウトを変えるには、専用のテンプレートファイルを作ります。

index.php   index.php  

トップページ 投稿ページ

専用のテンプレートファイル

index.php  

デフォルトの状態では、 トップページに使われているテンプレートはindex.php

Display Template Name というプラグインを 使うと、今使われているテンプレート名が分かるので便利です。

index.php  

その前に、テーマファイルの基礎知識をおさえましょう

例えば、index.phpは 中で複数のファイルを 呼び出しています。 header.php  footer.php  sidebar.php  content.php  

footer.php

sidebar.php

content.php

header.php テンプレートファイルは さらにパーツごとのファイルで 構成されています。

テーマファイルの構造について詳しく

<?php  get_header();  ?>  <div  id="main-­‐content"  class="main-­‐content">  <?php     if  (  is_front_page()  &&  twentyfourteen_has_featured_posts()  )  {       get_template_part(  'featured-­‐content'  );     }  ?>     <div  id="primary"  class="content-­‐area">       <div  id="content"  class="site-­‐content"  role="main">       <?php         if  (  have_posts()  )  :           while  (  have_posts()  )  :  the_post();             get_template_part(  'content',  get_post_format()  );           endwhile;           twentyfourteen_paging_nav();         else  :           get_template_part(  'content',  'none'  );         endif;       ?>       </div>     </div>     <?php  get_sidebar(  'content'  );  ?>  </div>  <?php  get_sidebar();  get_footer();  

index.phpの中身 get_header()などのテンプレートタグの中で 子ファイルを呼び出しています。 どのテンプレートタグがどのファイルを呼び出しているか把握しておいた方が良いでしょう。

header.phpを呼び出す

content.phpを呼び出す

sidebar.phpを呼び出すfooter.phpを呼び出す

index.php

トップページ専用のテンプレートファイルを作ります。

index.php トップページだけでなく、どのページにも使われることがあります。

home.phpトップページだけでなく、他のページにも使われることがあります。 (投稿ページにも使われることがあります)

front-­‐page.php トップページにしか使われません。

index.php  home.php  

front-­‐page.php  トップページだけ別の テンプレートを使いたい場合は、 front-­‐page.php  を使えばいいです。

トップページ

投稿ページ 固定ページ

アーカイブページ

カテゴリーページ

トップページになりうるテンプレートファイルの種類

front-­‐page.php

COPY

index.php   front-­‐page.php  

ゼロからテンプレートファイルを作るのは大変なので、index.phpをコピーしてfront-page.phpを作ります。そして部分的に改造していきます。

front-page.phpでは、ヘッダーやフッター、サイドバーはそのままで、 コンテンツ領域だけ変えていくことを考えれば良いです。

コンテンツ領域

front-page.phpの中身。 記事コンテンツを表示している部分を改造します。

front-­‐page.php

記事コンテンツを  表示している部分

準備として、記事を先に作りますスラッグ名：information

スラッグ名：blog

お知らせ5 先着100名様にプレゼント

お知らせ4 営業時間変更

お知らせ3 一部報道について

お知らせ2 臨時休業のお知らせ

お知らせ1 新製品入荷

カテゴリー名：お知らせ

ワニに襲われたのに眠りこけていた人

簡易トイレにジェットエンジンをつけた男

火葬の最中本人から電話がかかる

議会、草刈機の代わりに羊を導入

銀行の手数料が嫌で川を渡る→遭難

カテゴリー名：ブログ

「お知らせ」はinformation、「ブログ」はblogというスラッグでカテゴリを作り、記事を5件ずつ作っておきます。 スラッグとは：カテゴリを区別するための英字文字列です。重複しないように個別の名前をつけます。

カテゴリーは管理画面「投稿」の下の「カテゴリー」で作れます。 ここでカテゴリ名とスラッグを登録します。

準備ができたのでいよいよテンプレートファイルを触っていきます。→

「お知らせ」カテゴリの記事を  新しい順に５件表示

記事タイトル記事の抜粋

これは単なる画像

これは単なる画像「ブログ」カテゴリの記事を  新しい順に５件表示

記事タイトル記事の抜粋

ではどうやって作る? ソースコードを見てみましょう →

トップページでやりたいこと

<?php     $args    =  array(                          'posts_per_page'  =>  5,                          'category_name'    =>  'information',            );     $myposts  =  get_posts(  $args  );     foreach(  $myposts  as  $post  )  :              setup_postdata(  $post  );  ?>              <h3>            <a  href="<?php  the_permalink();  ?>"><?php  the_title();  ?></a>              </h3>        <?php  the_excerpt()  ?>  <?php     endforeach;     wp_reset_postdata();  ?>

記事データを取ってくることができるテンプレートタグget_posts()

記事データを取ってきて$mypostsに入れている

どんな条件の記事を取ってくるか？を指定している部分。  パラメータと言います。}}

まず、記事を5件取ってくることを考えます。

get_postsの解説はWordPress Codexで！ http://wpdocs.sourceforge.jp/テンプレートタグ/get_posts

Codexにあるサンプルコードをうまく利用すると phpに詳しくなくても大丈夫！

<?php     $args    =  array(                          'posts_per_page'  =>  5,                          'category_name'    =>  'information',            );     $myposts  =  get_posts(  $args  );     foreach(  $myposts  as  $post  )  :              setup_postdata(  $post  );  ?>              <h3>            <a  href="<?php  the_permalink();  ?>"><?php  the_title();  ?></a>              </h3>        <?php  the_excerpt()  ?>  <?php     endforeach;     wp_reset_postdata();  ?>

get_posts()のパラメータはいろいろ指定できます。

詳しくはCodexの http://wpdocs.sourceforge.jp/Class_Reference/WP_Query に、どんなパラメータが指定できるかの情報が載っています。

1ページに表示する件数：5件

カテゴリーのスラッグ名:information

<?php     $args    =  array(                          'posts_per_page'  =>  5,                          'category_name'    =>  'information',            );     $myposts  =  get_posts(  $args  );     foreach(  $myposts  as  $post  )  :              setup_postdata(  $post  );  ?>              <h3>            <a  href="<?php  the_permalink();  ?>"><?php  the_title();  ?></a>              </h3>        <?php  the_excerpt()  ?>  <?php     endforeach;     wp_reset_postdata();  ?>

get_postsでデータを取ってきたあとは、 そのデータを表示します。

記事へのリンクURL

取ってきた5件の記事を繰り返し処理して  １件ずつタイトルと抜粋を表示します。

記事のタイトル

記事の抜粋

さらに： the_excerpt()は記事本文の先頭55文字を抜粋してくれるけど、長すぎるのでもっと短くしたい。どうすればいいの?

function  custom_excerpt_length(  $length  )  {     return  40;  }  add_filter(  'excerpt_length',  'custom_excerpt_length',  999  );

the_excerpt()は記事の抜粋を表示するテンプレートタグですが、抜粋する文章の長さを変えることができます。

詳しくは以下参照 http://wpdocs.sourceforge.jp/テンプレートタグ/the_excerpt

デフォルトでは、抜粋の長さは55文字ですが、40文字に変更しています。

テーマファイルの下にある

作ったコードをfront-page.phpに組み込みます<div  class="informationarea">      <h2>お知らせ</h2>      <img  src="<?php  echo  get_template_directory_uri();  ?>/images/information.jpg"  />      <div  class="titlelist">          <?php              $args    =  array(                        'posts_per_page'  =>  5,                        'category_name'    =>  'information',                                );              $myposts  =  get_posts(  $args  );              foreach(  $myposts  as  $post  )  :              setup_postdata(  $post  );          ?>          <h3>              <a  href="<?php  the_permalink();  ?>"><?php  the_title();  ?></a>          </h3>          <?php  the_excerpt()  ?>          <?php              endforeach;              wp_reset_postdata();          ?>      </div>  </div>

<div  class="recentblogarea">      <h2>最近の投稿</h2>      <div  class="titlelist">          <?php              $args    =  array(                        'posts_per_page'  =>  5,                        'category_name'    =>  'blog',                                );              $myposts  =  get_posts(  $args  );              foreach(  $myposts  as  $post  )  :              setup_postdata(  $post  );          ?>          <h3>              <a  href="<?php  the_permalink();  ?>"><?php  the_title();  ?></a>          </h3>          <?php  the_excerpt()  ?>          <?php              endforeach;              wp_reset_postdata();          ?>      </div>      <img  src="<?php  echo  get_template_directory_uri();  ?>/images/recentblog.jpg"  />      </div>  </div>  

「お知らせ」最新５件表示

「最近の投稿」５件表示

トップページが出来ました

あれ？これは？

サイドバーを自在にあやつる

サイドバーのデフォルト位置はこうなっています。 テンプレートファイルを改造すれば、 サイドバーを表示する位置も自由に変えられます。

フッターウィジェットエリア

コンテンツサイドバー

メインサイドバー

管理画面の 外観 > ウィジェット と連動しています。

利用できるサイドバーの数は３つです。

サイドバーとテンプレートタグの対応表

名前 テンプレートタグ 実体のphpファイル

メインサイドバー get_sidebar() sidebar.php

コンテンツサイドバー get_sidebar('content') sidebar-­‐content.php

フッターウィジェットエリア get_sidebar('footer') sidebar-­‐footer.php

これ以外にサイドバーの数を増やすことも出来ます。 ただし、get_sidebar('xxxxx') の'xxxxx'とファイルを新しく作っただけでは、 管理画面で使うことはできません。 functions.phpの中で、phpコードを書いてサイドバーの定義を行う必要があります。 (やや高度な知識が必要なため、説明は割愛します)

コンテンツサイドバーの位置を変更してみます。

この位置変更はcssを編集するだけではできなかったので、 front-page.php内に書かれているコンテンツサイドバー表示のコード <?php  get_sidebar(  'content'  );  ?>

の記述している場所を移動しました。

コンテンツサイドバー

さらに：管理画面のウィジェット表示が実態にそぐわなくなったので、 表現を変更してみましょう。

register_sidebar(  array(      'name'                    =>  __('Content  Sidebar',  'twentyfourteen'),      'id'                        =>  'sidebar-­‐2',      'description'      =>  __('Additional  sidebar  that  appears  on  the  right.',  …      'before_widget'  =>  '<aside  id="%1$s"  class="widget  %2$s">',      'after_widget'    =>  '</aside>',      'before_title'    =>  '<h1  class="widget-­‐title">',      'after_title'      =>  '</h1>',  )  );

コンテンツサイドバー  の名前や説明は、  functions.php内のregister_sidebar()  で設定しています。  ここを変更すれば管理画面のウィジェット表示が変わります。

名前とか説明の文章が実態に合わない！

register_sidebar(  array(      'name'                    =>  'コンテンツエリア下サイドバー',      'id'                        =>  'sidebar-­‐2',      'description'      =>  'ドヤ顔サイドバー',      'before_widget'  =>  '<aside  id="%1$s"  class="widget  %2$s">',      'after_widget'    =>  '</aside>',      'before_title'    =>  '<h1  class="widget-­‐title">',      'after_title'      =>  '</h1>',  )  );

例えばこのように変えると、  管理画面の表現も変わります。

表記が変わった！

サイドバーは必ずしもサイドに配置する必要はありません。 ウィジェットを簡単に追加削除できる便利な箱として利用しましょう。

コメント欄を変えてみる

コメント記入欄のカスタマイズ いままでの例と同じように、「フォントの大きさ」「背景色」などはcssで調整できます。テキストエリアの大きさもcssで変えられます。

でも、  文字列を変えたい場合は？

「コメントを残す」を「こめんとを残してちょ！」に変更する方法

コメントブロック表示を担当しているテンプレートファイルはどこ？index.php

content.php

index.phpやcontent.phpにはコメントブロックを表示してそうな箇所は見つからない。ではどこに？

テンプレートファイルから探すアプローチは諦めて、 HTMLコードから探します。

コメントブロック周辺にある、  comments-­‐area  comment-­‐respond  comment-­‐reply-­‐title  といった検索しやすい特徴的な名前のクラス名を拾います。

grep検索すると、"comments-area"というキーワードがcomments.phpに存在することが分かります。

grep検索(グローバル検索)できるエディタを使いましょう。 !!!!

Windows Mac

サクラエディタ 秀丸 Sublime Text2 など

TextWrangler mi Sublime Text2 Coda2 など

comments.phpをじっくり見ると、"comment_form()"っていう、それっぽい関数が！

!!の部分がコメント記入ブロックを担当している！  試しに確認のため、この部分を削除してブラウザで表示してみると、コメントフォームが消えるので分かります。

となれば、もう comment_form()の中身を覗いてみるしかない！ このへんの探し方は知識よりも勘や想像力が勝負！

<?php  comment_form();  ?>

comment_form関数がコメント欄を担当していることは分かりました。 では次に、wp-include/comment-template.php のcomment_form関数の中に入って、がまん強くソースを見てみます。

<h3  id="reply-­‐title"  class="comment-­‐reply-­‐title">      <?php  comment_form_title(  $args['title_reply'],  $args['title_reply_to']  );  ?>        <small><?php  cancel_comment_reply_link(  $args['cancel_reply_link']  );  ?></small>  </h3>

comment-­‐reply-­‐title発見！  さきほどブラウザのインスペクタで調べた時には  このクラスの中に「コメントを残す」文字列が表示されていたのでした。

したがって、 wp-include/comment-template.php のcomment_form関数(2112行目)を以下のように変えれば良い！

<h3  id="reply-­‐title"  class="comment-­‐reply-­‐title">      <?php  comment_form_title(  $args['title_reply'],  $args['title_reply_to']  );  ?>        <small><?php  cancel_comment_reply_link(  $args['cancel_reply_link']  );  ?></small>  </h3>

<h3  id="reply-­‐title"  class="comment-­‐reply-­‐title">      コメントを残してちょ!      <small><?php  cancel_comment_reply_link(  $args['cancel_reply_link']  );  ?></small>  </h3>

これで望み通りの結果を得ることができます。

しかし、 wp-include/comment-template.php はテーマディレクトリの下にあるファイルではなく、 WordPress本体に含まれるファイルです。

WordPressをバージョンアップしたらこのファイルが上書きされて変更した箇所も元にもどってしまうし、コアファイルをいじったらいろいろとまずい！ (こういう魔改造に手を染めるとクセになるのでやめましょう)

もっとスマートなやりかたがあります。

がまん強くソースコードを読む練習 まずターゲットを探します。ターゲットが見つかったら上に遡る！

<h3  id="reply-­‐title"  class="comment-­‐reply-­‐title">      <?php  comment_form_title(  $args['title_reply'],  $args['title_reply_to']  );  ?>        <small><?php  cancel_comment_reply_link(  $args['cancel_reply_link']  );  ?></small>  </h3>

/**  *  Filter  the  comment  form  default  arguments.  *  Use  'comment_form_default_fields'  to  filter  the  comment  fields.  *  @param  array  $defaults  The  default  comment  form  arguments.  */  $args  =  wp_parse_args(  $args,  apply_filters(  'comment_form_defaults',  $defaults  )  );

$defaults  =  array(       'fields'                              =>  $fields,       'id_form'                            =>  'commentform',       'id_submit'                        =>  'submit',       'title_reply'                    =>  __(  'Leave  a  Reply'  ),       'title_reply_to'              =>  __(  'Leave  a  Reply  to  %s'  ),       'cancel_reply_link'        =>  __(  'Cancel  reply'  ),       'label_submit'                  =>  __(  'Post  Comment'  ),       'format'                              =>  'xhtml',  );

function  comment_form(  $args  =  array(),  $post_id  =  null  )  {

__(  'Leave  a  Reply'  )  が"コメントを残す"の実体。  __()  関数によって、英語が日本語に変換されている。

comment_form関数は$argsを引数にとる。  関数の外から$argsを指定することができる！

ここがターゲット上へ

$argsが無いときは$defaultの設定を使うっぽい(想像)

上へ

模範解答： WordPressのコアファイルwp-include/comment-template.php に手を入れるのではなく、 テーマファイルの中にある"comments.php" を改造します。

<?php  comment_form();  ?>

<?php     $args  =  array(       'title_reply'  =>  'こめんとを残してちょ！'     );     comment_form($args);  ?>

コメントのタイトルである、$args['title_reply']を  関数の外から指定してあげれば良い！

こうすることで、WordPressコアファイルに触れず、 テーマファイルだけで変更ができます。

実はCodexにも書いてあります。(一部英語だけど) http://wpdocs.sourceforge.jp/テンプレートタグ/comment_form

勘がするどい人は、ソースコードを解析する前に、 Codexに情報が載っていることに気づくかも！(これも勘と想像力の世界)

まとめ

・CSSの変更だけでも見た目は結構変わります。 ・エディタ内で検索を駆使すれば解決へのヒントが導かれます。 ・ソースを読む勇気があればいろいろ捗ります。 ・勘と想像力を働かせよう！ ・関数名やファイル名を覚えるのではなく、　探し方やアプローチのしかたを身に付ければ応用が効きます。

ありがとうございました。

@uemera uemura