なので、痛い目を見る前に、、、素人でも十分活用できる最低限の知識をまとめておきたいと思います。ぼく自身はワードプレスの知識も PHP の知識もない中手探りで使い出しました。HTML や CSS の当然わからりませんでした。それでも必要と思われる情報は全てネットで調べ、実際に触ってみる中で、ある程度体系化された状態で WordPress を理解するに至りました。
別にウェブデザイナーなどの専門家を目指すわけではないぼくたちに必要な最低限の理解を得ることができると思います。
まず始めに、これはどんな人のためのものか？
前述のように、WordPress や PHP などの専門性を高めたいと思っている人のものではありません。WordPress を使ってネットでの集客やセールス力をアップさせたいと思っている社長・起業家、個人事業主、マーケターやウェブ担当者のためのものです。
目的はあくまで売上アップ。そのために必要なカスタマイズが出来る程度に WordPress を活用できればいいと考えている人のためのものです。
また、ある程度知識のある玄人向けのものでもありません。WordPress を使い始めた方。WordPress を今まで何となくで使ってきた方。PHP に関して全然知識のない方のためのものです。
加えて、ウェブサイトの基本である、HTML や CSS の知識はある程度あることを前提に進めていきます。
では、早速いきたいと思います。
まずはWordPressにおける PHP の機能的な役割について
正直 PHP の本質を理解しているとは思ってませんが、ぼくがイメージしているのはこんな感じです。
サーバー上にある段階では、PHP ファイルはあくまでもレシピや材料としてだけの存在です。
実際にぼくたちが見ているウェブサイト（PHP で作られた WordPress などのサイト）は、ぼくたちがアクセスするまで基本的に存在していないようなものです。注文するまでは料理が出てこないのと一緒です。ぼくたちがアクセスして初めて、ウェブサイトとして形作られます。
オムライスが食べたい！（トップページが見たい）と注文（アクセス）すると、コックさん（これは何に該当するだろうか？）がレシピ（PHP で書かれた指示内容）を元に必要な材料（ヘッダー・本文・サイドバー・フッターなどの PHP ファイル）を揃え、オムライスとして調理・盛りつけ（CSS などでのレイアウト・デザインの構成）をして、ぼくたちの前に運ばれてきます（HTML ウェブサイトの表示）。
アクセスされる度に 1 回 1 回 HTML サイトを構成している・吐き出している、みたいな説明をよく見かけますが、それはつまり、ぼくたちがアクセスして初めて HTML ウェブサイトが構成されているわけです。
だからこそ、アクセスした人や表示するページなどの条件によって、細かくコンテンツを変えていくことができるわけですね（1 ページ目はヘッダー画像を表示するが、2 ページ目以降は表示させない、とか）。そして、そのために表示が遅くなる、というのがデメリットでしょう。
こういった作業をサーバーとやり取りしたりとか、なんかよく分かりませんが複雑なことをしているようですが、イメージとしてはこんな感じだと思います。
WordPress テーマの構造を PHP 的に把握する
WordPress のテーマファイルを覗いてみると、主に 2 種類の PHP ファイルがあります。この 2 つのタイプのファイルの関係性を把握しておけば、どこをカスタマイズしたらどう変化するのか、希望通りのカスタマイズをするためには、どこを変更したらいいのか、ということが分ってくるようになります。
その 2 つのタイプとは、
・ウェブサイトの材料となる PHP
WordPress のテーマで具体的に見てみると、以下のようなファイル名で分類できます（Twenty Thirteen のファイルを参考にしていますが、他もほぼ同じのはずです）。
- index.php（フロントページ）
- single.php（投稿ページ）
- page.php（固定ページ）
- tag.php（タグの検索結果一覧ページ）
- category.php（カテゴリーの検索結果一覧ページ）
・・・などなど。
- header.php（ヘッダー部分）
- content.php（コンテンツ部分）
- sidebar.php（サイドバー部分）
- comments.php（コメント部分）
- footer.php（フッター部分）
・・・などなど。
レシピの具体例
例えば、こちらの【 single.php 】というファイルを開くと、以下のようになっています。
<?php /** * The template for displaying all single posts * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php twentythirteen_post_nav(); ?> <?php comments_template(); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
結構内容はスカスカで簡単そうに見えますよね。どういう材料をどういう順番で、どういう条件で表示させるかが書かれています。
ざっくりと、1 〜 10 行目までがヘッダー、12 〜 25 行目までがコンテンツ、27 行目がサイドバー、28 行目がフッターの順番で構成されています。そしてヘッダーの部分は【 header.php 】を呼び出します。
吐き出す、と言った方が正しいですかね。。。同じようにサイドバー部分は【 sideber.php 】、フッター部分は【 footer.php 】を吐き出します。
コンテンツ部分はちょっと複雑になってます。【 single.php 】は比較的シンプルですが、他のレシピ系のファイルを見るとこの部分は条件分岐タグなどを用いて、色々な条件によって表示方法を変えられるようになっているみたいです。
材料の具体例
一方、材料となるファイルの例として【 header.php 】を見てみましょう。
<?php /** * The Header template for our theme * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </a> <div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button> <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?> <?php get_search_form(); ?> </nav><!-- #site-navigation --> </div><!-- #navbar --> </header><!-- #masthead --> <div id="main" class="site-main">
こちらも色々複雑な感じがしますが、実は PHP の理解というより、HTML の理解の方が必要です。めっちゃ単純化すると、、、以下のような基本的な HTML サイトの構造になっていることが分かります。
<html> <head><!-- 21行目 --> <title></title><!-- 24行目 --> </head> <body><!-- 33行目 -->
そして、【 footer.php 】を見てみると分かるんですが、</body> や </html> があって、ちゃんとサイトが閉じられた構造になっていることが確認できます。
また、ところどころに PHP タグが見られるのは、決まった情報を呼び出すための便利なタグとして使われています。
例えば、24 行目に <title> タグで挟まれた PHP タグを見つけることができると思います。通常、HTML だけで書いたサイトは、ここにタイトルを書くわけですね。テキストで。それがサイトのタイトルとして認識され、SEO 上も重要視されるわけです。
ですが、WordPress を始め、CMS ではこのタイトルを管理画面側で設定しますよね。直接 PHP ファイルに書き込んだりはしません。管理画面側からいつでも変更ができます。
つまり、このタグが管理画面で設定したタイトルを、この場所に吐き出してくれる、というわけです（アクセスすると、タイトルが文字として認識される）。
他にも、ブログの URL を吐き出してくれるタグや、ブログの投稿者名を吐き出してくれるタグとか、たくさんあります。
むしろ重要なことは、どんな HTML 構造になっていて、id や class などのセレクタは何と指定されているのか、というようなことを把握することでしょう。これを確認できるようになっておけば、スタイルシートのどの部分を変更すれば、デザインやレイアウトを変えられるのか、予想がつきますからね。
サイトの構造を把握するための便利な目印
HTML でページをつくる時は、1 つのファイルに <html> から <head>、その中の meta 情報、<body> と、全てを盛り込んで作っていきますよね。なので分かりやすいとは思います。ですが、WordPress はパーツごとにファイルが異なります。なので、全体の構成を把握するには、複数のファイルを確認しないといけません。
そこで、目印になるのが補足説明。これです。
</div><!-- #primary -->
Twenty Thirteen や、WordPress のデフォルトテーマシリーズには必ず似た様な表記があります。これは、基本タグを閉じる部分に書かれています。上でちょっと説明したように、【 header.php 】に書かれている <body> タグは、【 footer.php 】の中の </body> タグで閉じられています。
同じように、<div id=”＊＊＊”> みたいに始まる要素が、別のファイルで閉じられている場合があります。同じファイル内で閉じられていたとしても、ごちゃごちゃしているので見つけにくくなっています。
そこで、上記の様な補足説明の出番です。例に上げた説明書きは、</div> で閉じられていますよね。そして、#primary と書かれている。つまり、「<div id=”primary”> から始まる部分はここまでです」という意味になります。
これを理解しておけば、複雑でごちゃごちゃした WordPress のテーマファイルでも、なんとなく構成や、何が書かれているかを予想することができると思います。
あとは、ブラウザでソースコードを表示させたり、Firefox の Firebug などのアドオンを使って、サイトを分析すれば、だいぶ理解できるんじゃないかと思います。
まとめ：結局は HTML で好きなようにカスタマイズできる
では、ここまでの長い話をどのように活用すればいいのでしょうか？ それは、構造の把握にあります。結局のところ、ウェブサイトは HTML で書かれていて、レイアウト・デザインは CSS によって決められています。なので、何か追記したい、デザインを変えたいと思ったときは、基本的に HTML と CSS で対応可能です。
ただ、どこに追記したら、サイトのどのページのどの部分に表示されるのか？ もしくは、固定ページを変更したいが、どのファイルを変更したらいいのか？ ということが分かりにくいので、このような話をしました。
この PHP についてのイメージを持っておけば、かなりカスタマイズの自由度が高まると思います。ぜひ参考にしてみてください。
使い分けとしては、、、
- トップページやアーカイブページなどでは抜粋表示
- 記事全文を読みたい場合の個別投稿ページでは全文表示
というのがベターだと思います。
しかし、WordPress のデフォルトテンプレートである Twenty Eleven や Twenty Twelve など、初期設定のままだとトップページやアーカイブページでも全文表示なっているます。いちいち タグを挿し込むのも面倒くさい・・・。他のテンプレートでも同じようになっているかもしれません。
この記事では、条件分岐タグを使って全文表示と抜粋表示を使い分ける方法をご紹介します。
条件分岐タグの役割を理解しよう
まず、簡単にWordPressの条件分岐タグについて説明しておきたいと思います。理屈はそんなに難しくないはずです。PHPを使っていますが、特に専門的な知識がなくても使えてしまう便利さがあります。（少なくともぼくはPHP、よく分っていません）
条件分岐タグの基本構造は・・・
というものです。簡単ですよね？これを実際のPHPのタグに合わせて見てみましょう。
<?php if ( 【条件１】 ) : ?> 【表示１】 <?php else : ?> 【表示２】 <?php endif; ?>
| もし | <?php if ( 【条件１】 ) : ?> |
| 【表示１】 | 任意のタグ |
| それ以外は | <?php else : ?> |
| 【表示２】 | 任意のタグ |
| 条件指定終わり | <?php endif; ?> |
といった感じです。あとは、これらを踏まえて指定したい条件と表示させたい内容のタグを埋め込んでいけばいいというわけです。
条件を複数指定したい場合
条件を複数指定したい場合は、【 || 】この縦２本のラインを挟めばOKです。例えば、「もし、【条件１】【条件２】【条件３】の場合は・・・」というような指定をしたい場合は以下のように指定します。
<?php if ( 【条件１】 || 【条件２】 || 【条件３】 ) : ?>
多分、抜粋表示をさせたいのはカテゴリーページやタグページなど、複数に渡るはずなので、この複数の条件指定を覚えておきましょう。
ちなみに、この線（ → | ）なんて呼ぶのか分りませんが、キーボードの右上にあるはずです。。。
条件分岐タグを使って全文表示と抜粋表示を切り替える
さて、いよいよ実践です。今回は以下のように指定したいと思います。
| 抜粋表示 | トップページ（投稿一覧） アーカイブページ（archive.php） 検索結果一覧ページ（search.php） |
|---|---|
| 全文表示 | 個別投稿ページ（single.php） 固定ページ（page.php）など |
つまり、文章にしてみると、『もし、トップページ・アーカイブページ・検索結果エページの場合は抜粋表示にして、それ以外の場合は全文表示にしてね』となります。
ちなみに、アーカイブページとは、「カテゴリーページ」・「タグページ」・「作成別ページ」・「日付別ページ」の結果を全て含んでいます。なので、条件としてはアーカイブページを指定しておけばOKです。
全文と抜粋を着替える条件分岐タグの指定例
全文表示と抜粋表示の切り替えを指定するためには以下のように記述します。
<?php if ( is_home() || is_archive() || is_search() ) : ?> <?php the_excerpt(); ?> <?php else : ?> <?php the_content(); ?> <?php endif; ?>
ちなみに、トップページを指定する WordPress の条件分岐タグは
is_home()
カテゴリーページを指定する条件分岐タグは
is_archive()
検索結果一覧ページを指定する条件分岐タグは
is_search()
です。
また、抜粋表示を示す WordPress のタグは
<?php the_excerpt(); ?>
全文表示を示すタグは
<?php the_content(); ?>
です。実際はスタイルシートの指定やその他の PHP が記述されていると思いますが、単純化するとこのようになっています。
タグはどこに書き込めばいいのか？
ここからは Twenty Eleven、もしくは Twenty Twelve を元に解説していきます。条件指定の仕方は WordPress 共通していますので、お使いのテンプレートに合わせてカスタマイズしてみてください。
それでは、まずは content.php を開きましょう。Twenty Eleven は 35 行目、Twenty Twelve は 33 行目辺りから、コンテンツの表示方法についての記述があります（子テーマに複製してから作業してくださいね）。
<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?>
元々の記述内容は、『もし、検索結果一覧ページなら抜粋表示にして、それ以外は全文表示にしてね〜』となっています。なので、単純に最初の
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
の部分を
<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
に変更すれば OK です。
簡単ですね。ぜひ試してみてください。
- グローバルメニューを一番上に持って行きたい
- 検索窓を消したい
- タイトル・画像・グローバルメニューのレイアウトを自由に入れ替えたい
header.phpの構成をなんとなくつかんでおく
グローバルメニューを一番上に持って来たり、タイトルと画像の間にメニューを挟んだり、とにかくヘッダー部分のパーツのレイアウト表示を入れ替えるためには、php の構成をつかんで、それぞれ該当箇所を入れ替えれば OK みたいです。
というわけで、header.php の構成を見てみましょう。
確認方法は Firefox の Firebug なんかを使って、CSS の id、もしくは class を確認し、それが指定している箇所をheader.php から見つけ出す、という単純作業です。
ヘッダーパーツの id の指定は、CSS についてまとめたこちらの記事でも紹介しておりますが、改めてここでも紹介しておきます。
【 header.php 】を開いて、これらのidに該当するの範囲を確認します。必要なのは 70 行目辺りの<body>タグ以降です。
<body <?php body_class(); ?>> <div id="page" class="hfeed"> <!-- ■ここからヘッダー全体を指定している【 #branding 】が始まっています --> <header id="branding" role="banner"> <!-- ★ここからヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】が始まっています --> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <!-- ★ヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】はここまで --> <!--ヘッダー画像に関する記述はここから --> <?php // Check to see if the header image has been removed $header_image = get_header_image(); if ( $header_image ) : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { /* * We need to figure out what the minimum width should be for our featured image. * This result would be the suggested width if the theme were to implement flexible widths. */ $header_image_width = get_theme_support( 'custom-header', 'width' ); } else { $header_image_width = HEADER_IMAGE_WIDTH; } ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php /* * The header image. * Check if this is a post or page, if it has a thumbnail, and if it's a big one */ if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) && $image[1] >= $header_image_width ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /> <?php endif; // end check for featured image or standard header ?> </a> <?php endif; // end check for removed header image ?> <!--
なるべく分かりやすくなるように、●とか★とか記号を割り振っておいたので、共通する記号に挟まれた部分をカットして好きな場所に貼付ければ、表示位置が変わるというわけです。
ちなみに、検索窓の位置変更は CSS をいじった方が思い通りにいきましたので、ヘッダー部分から検索窓を消したい！ 検索フォームなんてじゃまだ！ という場合に、【 header.php 】内の該当箇所を削除すればOKだと思います。
というわけで、あとは該当箇所を入れ替えればいいだけなんですよね。
では実際にいくつか試してみましょう。
グローバルメニューを一番上に持ってくる
まずはグローバルメニューを一番上に表示させる方法です。ブログタイトル部分の上に表示させるわけですね。
グローバルメニューは▲で囲んである部分
<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています --> <nav id="access" role="navigation"> <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div> <?php if ( ! is_singular() ) : ?> <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div> <?php endif; ?> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access --> <!-- ▲グローバルメニューを指定する【 #access 】はここまで -->
こちらを【 <header id=”branding” role=”banner”> 】のすぐ下に移動させればOKです。つまり【 <hgroup> 】の直前ですね。
すると、こんな感じでグローバルメニューが一番上に表示されます。
ブログ上部の余白を消す
グローバルメニューとブラウザの間、というかブログそのものとブラウザとの間にある余白を消して、グローバルメニューを画面上部に引っ付けたい場合、これは CSS の方を書き換える必要があります。
【 #page 】の【 margin 】の top を 0 にすれば OK です。
#page {
margin-top: 0;
}
これでブログ上部の余白が無くなります。
検索窓を削除してグローバルメニューは真ん中に
次は検索窓を削除します。
これはもう●で囲んでおいた箇所を削除すればいいだけなので楽勝です。
<!-- ●検索窓に関する記述はここから --> <?php // Has the text been hidden? if ( 'blank' == get_header_textcolor() ) : ?> <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>"> <?php get_search_form(); ?> </div> <?php else : ?> <?php get_search_form(); ?> <?php endif; ?> <!-- ●検索窓に関する記述はここまで -->
検索フォームを表示させているのは
<?php get_search_form(); ?>
という部分のようなので、これを削除するだけでも大丈夫そうです。
また、
<div class="only-search 〜
から始まっている部分は、ヘッダーを消した際の検索窓がグローバルメニュー内に移動した時の表示を指定しているようです。CSS 側で【 .only-search 】を探すとスタイルの変更が可能です。
グローバルメニューの下の余白を消す
グローバルメニューをタイトルスペースとヘッダー画像の間に持って来たら、グローバルメニューとヘッダー画像との間に微妙な余白ができてしまいました。
これは CSS ではグローバルメニューの下マージン（margin-bottom）に余白が指定されているからのようです。ですので該当箇所のマージンの値を0にすると、グローバルメニューと画像が引っ付いて、余白がなくなります。
#access {
margin-bottom: 0px; /* デフォルトでは 6px なので、0 や好きな値に */
}
最後はヘッダー画像を一番上、次にブログタイトル、一番下にグローバルメニューの順番で配置してみます
これも単純で★でかこっている部分【 <hgroup> 】をヘッダー画像（）とグローバルメニュー（▲）の間に移動させるだけです。
検索窓は動きませんでしたが、こっちは CSS で好きな位置に表示させれば OK だと思います。
あとは、【 #site-title 】と【 #site-description 】を入れ替えてみると、ブログタイトルとブログの説明部分が入れ替わります。CSS で微妙なレイアウトのずれを調節すれば、だいたいのことは実現できるのではないかと思います。
以上、Twenty Eleven のヘッダーレイアウト変更についてでした。