同じサイト内であっても、別のページに飛ばされたりすると離脱率が上がり売上が下がります。これはすでに実証されている事実です。なので、商品（サービス）を売るページは、できるだけ無駄なリンクを削除し、シンプルに１つの商品を説明する専用ページである必要があります。
WordPress には固定ページという機能があります。この固定ページは商品紹介ページを作成するのに適していますが、グローバルメニューやサイドバー、フッターメニューなどを排除することができません。
Twenty Twelve を使うと全幅テンプレートというのがあり、グローバルメニュー以外の無駄なリンクを排除することができます。しかし、それでもグローバルメニューやヘッダーまでは基本的に排除できません。そこで、ヘッダーもフッターもサイドバーも排除したセールス専用のワンカラムのテンプレートを作成したいと思います。
つまりセールスレターやランディングページを作ろう！ ということ
このページの呼び方はプレゼンページとかセールスページとか勝手に名付けていますが、決して販売目的に限りません。一般的な言い方としては、ランディングページ・セールスレターなどでしょうか。見積もり依頼、資料請求、サンプル請求、予約など、見込み客に何かアクションを起こしてもらうためのページということです。
こういった目的のページは、ワンカラムにするというのがセオリーです。インターネット上で、お客さんを獲得したいと考えている全ての人は、会社紹介や事業内容を説明した一般的なホームページとは別に、このようなセールスページを用意するようにしましょう。そして、売りたいものはそこで売るのです。
WordPressでは異なるレイアウトのページを表示させることができる
例えばこちらのページ。このページは無料の PDF レポートを紹介しているページですが、WordPress の固定ページを使って作成しています。Twenty Eleven のサイドバーテンプレートです。
このサイトではサイドバーテンプレートを使用すると、他とはレイアウトが変わります。ヘッダーはなく、フッターも別のパターンになります。サイドバーもこのテンプレート専用の内容になっています。
Twenty Eleven には、元々サイドバーテンプレートやデフォルトテンプレート、ショーケーステンプレートといった、レイアウトの違うテンプレートが用意されています。この内サイドバーテンプレートを応用して、レポートの請求という目的のために無駄を省いたシンプルなページを作成しました。
なぜ、固定ページを使うのか？
それは編集がしやすいからです。WordPress のエディタを使えるので、文字の入力や画像の挿入が簡単にできます。タグ打ちが苦手な人でもビジュアルエディタを使えば、文字色や太さなどの変更も簡単です。そのため固定ページを使うことにしました。
手順
- 必要なファイルを複製する
- テンプレートファイルを書き換える
たったこれだけです。これだけで、無駄な情報を削除したセールス専用ページ（プレゼン専用ページ）を作成することができます。ランディングページにも使えます。WordPress のデフォルトテーマである Twenty Eleven を使って作成したページはこのような感じです。
１．必要なファイルを複製する
テーマは Twenty Eleven を使用します。まずはセールスページ用のテンプレートファイルを作成しましょう。固定ページ用のテンプレートを追加する方法は、こちらの「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。
簡単にまとめておくと、以下の３つのファイルを複製して、ファイル名を変更します。例えば、sideber-page.php を複製して、ファイル名を sales-page.php などとします。そして、これらのファイルを子テーマにアップすれば OK です。
| 親テーマのファイル | 子テーマにアップ | |
| sidebar-page.php | 複製してファイル名変更 → | sales-page.php |
| header.php | 複製してファイル名変更 → | header-2.php |
| footer.php | 複製してファイル名変更 → | footer-2.php |
２．テンプレートファイルを書き換える
複製したファイルを書き換えます。３つのファイルがありますので、それぞれ以下のように書き換えてみます。
(1) sales-page.phpの変更
- テンプレートファイル名の指定
- 出力するヘッダーを header-2.php に指定
- サイドバー出力タグを削除する
- 出力するフッターを footer-2.php に指定
<?php
/**
* ▼ テンプレートファイルの名前を指定 ▼
* Template Name: セールスページテンプレート
* Description: A Page Template that adds a sidebar to pages
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header('2'); ?><!-- ()の中に数字を追加 -->
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<!-- サイドバー出力タグを削除 -->
<?php get_footer('2'); ?><!-- ()の中に数字を追加 -->
(2) header-2.phpの変更
- 初期状態で73から始まるサイトタイトル部分（hgroup）を削除
- 初期状態で78行目から始まるヘッダー画像を削除
- 初期状態で115行目から始まる検索窓を削除
- 初期状態で128行目から始まるグローバルナビゲーションを削除
<body <?php body_class(); ?>> <div id="page" class="hfeed"> <header id="branding" role="banner"> <!-- 73行目からのサイトタイトルを削除 --> <!-- 78行目からのヘッダー画像を削除 --> <!-- 115行目からの検索窓を削除 --> <!-- 128行目からのナビゲーションを削除 --> </header><!-- #branding --> <div id="main">
(3) footer-2.phpの変更
- 初期状態で17行目から始まるフッターサイドバー（フッターウィジェット）の出力部分を削除
- 初期状態で25行目から記載されているクレジット等の表記を自由に変更
特定商取引法に関する表記やプライバシーポリシー（個人情報保護方針）へのリンクを記載するのが一般的
<?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content after * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?> </div><!-- #main --> <footer id="colophon" role="contentinfo"> <!-- 17行目からのフッターサイドバー（ウィジェット）を削除 --> <!-- ▼ 25行目からの記述を自由に変更 ▼ --> <div id="site-generator"> <?php do_action( 'twentyeleven_credits' ); ?> <!-- ▼ 今回はこの部分を追記 ▼ --> <p><a href="">特定商取引法に関する表記</a>｜<a href="">プライバシーポリシー</a>｜Copyright © ＊＊＊＊＊ All Right Reserved.</p> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a> </div> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
これで、固定ページでコンテンツを作成する際に、新たに作成したテンプレート（この例ではセールスページテンプレート）を選べば、header-2.php と footer-2.php の内容が適用されるようになります。
今回は、これら２つのファイルのほとんどの記述を削除したので、実際は本文の内容くらいしか表示されません。また、お好みで好きなようにヘッダーとフッターの表示をカスタマイズすることもできます。その時は PHP とかあまり気にせず、HTML の要領でタグや文字を記述すれば OK です。
セールスページのスタイルシートも変更したい場合
ページ専用のスタイルシートを適用したい場合、いくつか方法があります。ぼくがよく使う方法は、そのページ専用の外部スタイルシートを読み込ませる方法です。サーバー上に別の CSS ファイルを用意して、そこで一括変更してしまおうというわけです。指定したページ以外のスタイルを変えることなく、そのページデザインの変更が可能です。
方法についてはこちらの「WordPressでページごとに別のスタイル（外部CSS）を適用させる方法」にまとめていますので、チェックしてみてください。
タイトルを非表示にしたい場合
ページタイトルは以外と邪魔になります。ページの冒頭、いわゆるヘッドライン（キャッチコピー）の部分に表示させたい言葉というのは、最も重要な部分です。理由は割愛しますが、この最も重要な部分を最も効果的に見せるためには、ページタイトルをそのままヘッドラインにするのは都合が悪いです。自由度が制限されるからです。
ですので、ページタイトルは非表示にして、ヘッドラインは本文に直接書くことをオススメします。
タイトルを非表示にする方法には次の２つを押さえておきましょう。
１．スタイルシートで display: none; を指定する
スタイルシートを使って表示を隠してしまう方法です。上記の「ページごとにスタイルを適用させる方法」を使って、まずはセールスページ専用の CSS ファイルを用意します。そこに以下のように書けば OK です。
.entry-title {
display: none;
}
２．phpのテーマファイルを用意してタイトル部分を削除する
これはちょっと知識が必要になります。詳しいことは割愛しますが、固定ページのコンテンツは、content-page.php というファイルが出力しています。このファイルを開くと、h1 といったタグや、タイトルを出力するタグなどが書かれているのを発見できると思います。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"><!-- ▼ この部分がタイトルを出力 ▼ --> <h1 class="entry-title"><?php the_title(); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
つまり、この記述を削除してしまえばタイトルは表示されなくなります。
ただし、この content-page.php は、全ての固定ページに適用されてしまうので、タイトル部分の記述を削除すれば、セールスページだけでなく、全ての固定ページのタイトルが表示されなくなってしまいます。そこで、セールスページテンプレート専用に、content-page.php と同じ役割のファイルを作成し、この新たに作成したファイルを適用させる必要があります。
手順は以下の通りです。
(1) content-page.php を複製しファイル名を変更する
content-page.php を複製しファイル名を変更します。ファイル名で変更するのはハイフン以降です。【 content 】と書かれている部分は変更しないように注意してください。例えば、【 content-sales.php 】と変更します。
(2) content-sales.php に記述されているタイトル部分を削除する
１．で作成した content-sales.php を開き、タイトルタグを削除します。結果的に以下のようになります。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- ヘッダー・タイトル部分のタグを削除 --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
削除した後は、このファイルを子テーマフォルダにアップしてください。
(3) sales-page.php を使用した場合は、content-sales.php を出力するように変更する
今度はセールスページテンプレート用のファイルである sales-page.php（先ほど作ったテンプレートファイルです）を開きます。元々サイドバーテンプレート用のフィイルを複製して作ったものなので、記事本文に該当する部分では content-page.php を出力するように記述されています。この部分を content-sales.php を出力するように書き換えます。具体的には18行目のタグで、【 page 】の部分を【 sales 】に書き換えれば OK です。
<div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'sales' ); ?><!-- pageの部分をsalesに書き換える --> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary -->
以上で、セールスページテンプレートを使用した場合タイトルが表示されなくなります。この方法を使えば、セールスページテンプレート独自の内容を表示させたり、逆に非表示にさせたりできますので、WordPress カスタマイズの応用テクニックとして覚えておくといいと思います。
]]>Twenty Elevenの場合、テンプレートは３種類あります。
- デフォルトテンプレート
- サイドバーテンプレート
- ショーケーステンプレート
- デフォルトテンプレート
- フロントページテンプレート
- 全幅ページテンプレート、サイドバーなし
基本的にこれらのテンプレートのうち、どれかを使えば事足りるとは思いますが、中にはちょっと違うレイアウトのテンプレートが欲しいと思う場合もあるでしょう。
特に、〝トップページのみ〟他のページとは違ったレイアウトにしたいと思う事は少なくないのではないでしょうか？ かく言うぼくも、トップページのみレイアウトや表示を変えたいと思った事が多々あります。そんな時は条件分岐タグを使うのも１つの方法ですが、テンプレートファイルを新たに作成し、別のレイアウトを表示してくれる方法を使うのも手です。
この記事では、そんなテンプレートファイルの作り方を説明していきます。
事例）Twenty Eleven の場合
テンプレートファイルとは？
ここでは、WordPress のデフォルトテーマである Twenty Eleven を例に取って見て行きます。Twenty Eleven には３種類のテンプレートがありました。デフォルトテンプレート・サイドバーテンプレート・ショーケーステンプレートの３つです。これら３つのテンプレートを呼び出すファイルは次の３つです。
- デフォルトテンプレート → page.php
- サイドバーテンプレート → sidebar-page.php
- ショーケーステンプレート → showcase.php
これらのファイルを開いてみてください。ショーケーステンプレートは結構複雑で、何が書かれているのかよく分かりませんが、デフォルトとサイドバーテンプレートは、結構スカスカで、簡単な作りになっているのが分かると思います。
ですが、その全ての元になっているのはデフォルトテンプレートです。よく見てみると、デフォルトテンプレートとサイドバーテンプレートの違いは、サイドバー呼び出すタグがあるかないかの違いだけです。
デフォルトテンプレート
<?php /** * The template for displaying all pages. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <!-- サイドバーのタグなし --> <?php get_footer(); ?>
サイドバーテンプレート
<?php /** * Template Name: Sidebar Template * Description: A Page Template that adds a sidebar to pages * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?><!-- サイドバーのタグあり --> <?php get_footer(); ?>
Twenty Eleven に新たにテンプレートを追加したい場合は、サイドバーテンプレートを活用すると簡単です。
(1) テンプレートファイルを複製する
まずは、サイドバーテンプレートを複製します。ファイル名は適当に付けてください。ここでは、【 sub-page.php 】としておきます。複製したファイルは子テーマのテーマフォルダにアップロードしましょう。
(2) テンプレートであることを認識させる
複製したファイルを開くと以下のようになっています（サイドバーテンプレートと同じ内容）。このファイルを新しいテンプレートと認識させるのはとても簡単です。冒頭部分の【 Template Name: Sidebar Template 】という部分に新しい名前を付けるだけです。【 Sidebar Template 】の部分ですね。ここは日本語でもOKです。
<?php /** * Template Name: サブページ ←ここの名前を任意に変更するだけ！ * Description: A Page Template that adds a sidebar to pages * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?>
これで一旦固定ページ作成画面を見てみましょう。新しいテンプレートが認識されているはずです。
新しいテンプレート用のスタイルシートを適用する
新しく追加したテンプレートには、一部適用されないスタイルシートがあります。例えば、今回はサイドバーテンプレートを複製しましたが、サイドバーテンプレートにしか適用されないスタイルは、新しいテンプレート（ここではサブページテンプレート）に適用されません。そのため、サイドバーの位置が横ではなく、コンテンツの下にきているはずです。
新しいテンプレートだけにスタイルを適用させたい場合は、以下のように書くと便利です。
/* ファイル名の sub-page.php のみに適用させるスタイル */
.page-template-sub-page-php p {/*サブページの p タグの文字色は全て赤色になります。*/
color: #f00;
}
もしくは、カスタムフィールドを使って、該当する固定ページのみに適用される専用スタイルシートを、新たに追加する方法もあります。
また、テンプレートに割り振られている id 自体を、新しく書き換えてもいいです。しかし、そうすると全てのスタイルをいちから適用し直さなくてはならなくなるので面倒です。
ですが、WordPress を集客やセールスに活用したいと考えるなら、サイトのカスタマイズに時間をかけるわけにはいきません。ぼくたちはあくまでもビジネスに WordPress を活用したいと考えているわけで、ウェブデザイナーになりたいわけではありません。
なので、できるだけ無駄な時間をかけずにカスタマイズするべきです。いちいち検索で調べたり、人に聞いたり、質問したり、そんな時間がもったえないですよね。
WordPress を使う本当の目的は
デザインスキルを身に付けることではない
また、完全にオリジナルのテーマを作るというのも非効率です。ぼくたちは WordPress のテーマを自作できるスキルを身につける必要はないのです。自社のイメージに合わせて、全体のカラーを整えたりレイアウトを整えたりできればいいわけです。
ですので、WordPress のテーマを 1 から作るのではなく、既にあるテーマを自分好みにカスタマイズできるようになれば十分なのです。そして、そのために必要なスキルや知識、テクニックなどは実はそんなに多くありません。中でもスタイルシートを変更する方法を身に付ければ、ある程度自分の好きなデザインにしていくことができます。
そこで、なるべく時間を書けずに Twenty Eleven のスタイルシートを変更し、Twenty Eleven をベースとしたオリジナリティのある WordPress サイトをつくろう！ ということで、あるマニュアルを作成しました。それがこちら。
WordPress のデフォルトテーマである Twenty Eleven の CSS の変更方法に特化したマニュアルです。ただし、これは Twenty Eleven のスタイルシートの内容を解説したものではありません。逆引きマニュアルとなっているように、「○○を変更したい場合は、●●を変更すれば OK」ということが瞬時に分るようにしたマニュアルです。
2013 年 2 月時点で 30 項目の変更箇所を記載しています。例えば「ヘッダーの高さを変更したいな〜」と思た場合、目次をざっと探して 9 番目の項目をクリックすると、該当ページへジャンプします。後はそこに書かれているスタイルの書き方をコピペして、好きな高さを指定すれば OK です。簡単ですよね？
そのような項目を、ヘッダー・グローバルナビゲーションメニュー・コンテンツ部分などに分けて、30 項目に渡って掲載しています。さらにこのマニュアルは、今後も変更内容を追加していく予定です。
Twenty Elevenを使う３つの理由
2013 年現在、WordPres sのデフォルトテーマの最新版は Twenty Twelve です。Twenty Eleven は 1 つ前のタイプのテーマです。
なぜ、Twenty Eleven を使うのでしょうか？
理由１）シンプルでカスタマイズ性が高い
Twenty Eleven はとてもシンプルな作りです。かつ、サイドバーも右・左と選べますし、フッターにも最大３つまでウィジェットを追加できます。つまり基本的なレイアウトは管理画面から簡単に変更できます。
また、デザインはシンプルかつ基本的なパーツはそろっているため、ビジネス上必要なコンテンツを見せるためのデザインが簡単にできます。タイトル・画像・ナビゲーションメニュー・サイドバー・フッターなど、これらの基本的なパーツを簡単に管理画面から編集することができます。
また、ある程度テーマファイルの中身も把握すれば、より自由にコンテンツを見せることも可能です。
理由２）新たに他のテーマのCSSを理解する時間がもったえない
CSS も基本的なことは一緒です。例えば文字の大きさを指定したければ【font-size】を使います。そこに違いはありません。ですが、id や class といった CSS セレクタの指定の仕方は、テーマごとに異なります。ですので、テーマが変われば改めて CSS の中身を把握しなければならず、そこに時間がかかります。
Twenty Eleven に関して今まで時間をかけてきていますので、今から更なる時間をかけて別のテーマの中身を理解するのは非効率です。Twenty Eleven はアップデートも繰り返されているテーマですのでまだまだ使えます。Twenty Twelve も魅力的ですが、こちらの分析・解析は他の専門家に任せて、ぼくたちは慣れ親しんだテーマを使いましょう。
理由３）情報が多い
これも理由 2 と似たような感じですが、Twenty Eleven はリリースされてから時間が経っているため、ネット上に関連情報が多いというのが挙げられます。また WordPress のデフォルトテンプレートであるため、やはり情報が多い。
他のテーマの場合、カスタマイズ方法を調べてみても、たいして情報が出てこない場合が多いでしょう。Twenty Elevenなら、デフォルトテーマということもあり、色んな人が使い方やカスタマイズの方法を公開してくれています。なので、時間短縮にもなりますし、調べる労力が減り、効率もよくなります。
無駄な時間を省いて、効率よくカスタマイズを
以上、Twenty Eleven を使う理由を挙げてみました。結局のところ、インターネットを使ったマーケティングに WordPress を使っていくとなると、最も重要なことはコンテンツをつくることです。質・量ともに重要です。この一番重要な部分に時間と力を注ぎ、その他の部分はできるだけ簡単に、効率よくできるようにしようというのが、このマニュアルの趣旨です。
「時は金なり」なんて言われますが、実際は「時は金よりも貴重」です（お金は失っても取り戻せますが、時間は失ったら失ったままですからね……）。ぜひ、作業の効率化を図って、ビジネスを成長させていってください。
＞ ダウンロードはこちらの専用ページから、無料でできます。
デフォルトでは「続きを読む→」という感じで、テキストと→（矢印）だけです。目立ちませんし、味気ない。まぁこのブログはその味気ないままなんですが、そこは突っ込まないことにして、今回のコンテンツはこの「続きを読む→」のデザインを変更する方法に関してです。
記事の中にMoreタグを挿入した場合
More タグというのがあります。このタグを挿入すると、そのタグより前の文章だけが抜粋され、それ以降は「続きを読む」になります。記事の一覧ページやアーカイブページなどでは抜粋表示となり、個別投稿ページで全文表示となります。
ビジュアルエディタの場合）
テキストエディタの場合）
この場合、「続きを読む→」に class が割り振られます。自動的に。それがこちら。
ですので、この class に文字色や背景・画像などを指定すれば「続きを読む→」を自由にデザインできます。具体的なスタイルシートの書き方についてはのちほど。
Moreタグを使わず、常時抜粋表示になるようにテンプレートをカスタマイズしている場合
WordPress には、抜粋表示用のタグが用意されています。それがこちら。
<?php the_excerpt(); ?>
このタグを使えば、記事は抜粋表示になります。
このタグを使った、記事一覧の抜粋表示の方法についてはこちら。
このカスタマイズを行えば、いちいち記事ごとに More タグを指定しなくても、一定の文字数で自動的に抜粋表示してくれます。しかしこの場合、先ほどのような特定の class が割り振られません。【 more-link 】という class を指定しても、何も変化しないのです。
ではどのように指定すればいいのでしょうか？
「続きを読む」にclassを追加する方法
この編集は親テーマの functions.php を編集する必要がありそうです。該当箇所は以下の部分。
function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) . '</a>';
<a> タグの中に class を指定すれば OK です。
function twentyeleven_continue_reading_link() {
return ' <a class="任意のセレクタを指定" href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) . '</a>';
他にも、<a> タグの外を、<span> や <div> で囲っても OK です。
function twentyeleven_continue_reading_link() {
return ' <div class="任意のセレクタを指定"><a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) . '</a></div>';
/* </a>の後を必ず閉じるのを忘れないように！ */
<span> で囲むとインライン扱いなので、抜粋記事に続くように「続きを読む→」が表示されます。
<div> で囲むとブロック要素になるため、抜粋記事と「続きを読む→」が改行されて別段落として表示されます。
functions.phpを編集する場合の注意点
本来、テーマのカスタマイズは、子テーマをつくって編集するのが望ましいのですが、functions.php の場合はそうはいかない場合があります。親テーマと同じ内容を子テーマに記載すると、エラーが発生してサイトが表示されなくなるのです。
そのため、親テーマで既に記述されている内容を編集する場合は、親テーマの functions.php を直接編集する必要があります。そうなると、テーマのアップデートをした際に編集内容が元に戻ってしまいますので注意してください。
「続きを読む→」の編集テクニック
以上の方法で、「続きを読む→」をデザインするための下準備は整いました。あとはスタイルシートで編集をするだけです。
「続きを読む→」をスタイルシートでデザインする方法
指定した class に背景や文字色、余白などを指定していけば OK です。以下にサンプルを載せておきます。（functions.php の続きを読むの部分を <div> タグで囲った場合）
スタイルシートの記述例）
/* 続きを読む */
.read-more a {
float: right;
width: 100px;
padding: 0.3em 1em;
color: #eee;
background: #000;
border: 1px solid #666;
}
実際の表示）
「続きを読む→」の文言や矢印を変更する方法
「続きを読む」は「続きを読む」と表示されています。またその後の「→」も矢印のままです。これを好きな言葉に変更してみましょう。この変更は functoins.php を直接編集します。「Continue reading」と書かれている部分を好きな言葉に変更できます。
function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'もっと読む！（好きな言葉に置き換え） <span class="meta-nav">→</span>', 'twentyeleven' ) . '</a>';
矢印に関しては、HTML の特殊文字用コード（→）で記述されていますので、他のコードにしてもいいですし、消し去っても OK。その他の記号をそのまま記述して大丈夫です。
「続きを読む→」を画像にする方法
テキストではなく画像で表示させたい場合も、functions.php を直接編集します。テキストに該当する部分を消して、画像指定の <img> タグを使えば OK です。画像は絶対パスで指定しましょう。（Moreタグでの抜粋表示の場合は無効です。）
functions.phpの記述）
function twentyeleven_continue_reading_link() {
return ' <div class="read-more"><a href="'. esc_url( get_permalink() ) . '">' . __( '<img src="絶対パスで画像のURLを指定" alt="続きを読む" />', 'twentyeleven' ) . '</a></div>';
スタイルシートの記述例）
/* 続きを読む */
.read-more {
float: right;
}
/* マウスポインタを合わせると、光ったようになります */
.read-more:hover {
filter: alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
}
実際の表示）
以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。
問題）レスポンシブデザインに対応できなくなった
Twenty Elevenはもともとレスポンシブデザインになっていました（レスポンシブデザインって何？ という場合は、ググってみてください）。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しないといけません。
そういう不具合もあり、レスポンシブウェブデザイン対応の Twenty Eleven であるにも関わらず、WPtouch というプラグインを使ってスマホ表示を最適化していました。
しかし、せっかくのレスポンシブデザインを無下にするのももったいないと思い、なんとか解決してみようと思いました。また、レスポンシブデザインが昨年から流行のようなので、対応するための考え方や基礎を知るためにも必要な取り組みでした。
そういうわけで、改めて、ヘッダーやフッター、またはナビゲーションメニュー（グローバルメニュー）などを、ブラウザの横幅いっぱいに広げて表示させるカスタマイズ方法をまとめたいと思います。
ブラウザの幅を超えて表示させるCSSの基本的な考え方
こちらは過去にメニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法の記事で取り上げていますので、詳しくはそちらを見て頂きたいのですが、簡単にまとめておきます。
主にマージンとパディングによって実現しています。ネガティブマージンという、マージンに負の値を指定して要素をはみ出す方法を使います。しかし、そのままだと中のコンテンツまではみ出してしまうので、パディングで同じ値だけ内側に押し込みます。そうすれば、見かけとして上の図のような、メニューなどの要素が body をはみ出して表示されるようになります。
ただし、このままだと右にいくらでもスクロールができてしまいます。マージンがはみ出した分、サイトの幅自体が広がってしまったのです。
そこで登場するのが【 overflow 】です。これを使うことで、はみ出した要素を表示させないようにできます。overflow を使うときのポイントは２つです。
- ひとつは 1 番基礎となる要素【 html 】は【 auto 】を指定
- html 上にある【 body 】は【 hidden 】を指定
【 overflow: hidden; 】によって、ブラウザの幅をはみ出した部分を非表示にしてくれます。なので、マージンを広げてもブラウザの幅以上にサイトが広がって表示されることはありません。そういうわけで、過去の記事に書いていた CSS の指定方法はこちらでした。
/* 前提条件の記述 */
html {
overflow: auto;
}
body {
overflow: hidden;
position: relative;
min-width: 1000px;
}
/* 横幅を背景いっぱいに広げたい場所に追記 */
#example {
margin: 0 -500%; /* 上下の margin は元の値に合わせて適宜変更 */
padding: 0 500%; /* 上下の margin は元の値に合わせて適宜変更 */
}
ただ、既に言ったようにこれだとレスポンシブデザインに対応してくれなくなります。そこで、Twenty Eleven のレスポンシブデザイン対応を活かしつつ、ブラウザや背景いっぱいに要素を広げて表示させる方法が必要になります。
結論）追記するのは overflow だけで良かった件
上記の書き方は、参考にさせて頂いたサイトからそのまま引っ張ってきたものなんですが、どうも Twenty Eleven の場合、不必要な記述があるようでした。まず、【 min-width 】はいりません。これが一番の原因です。これのせいでレスポンシブデザインがレスポンシブルじゃなくなっていたわけです。
また、【 position:relatvie; 】も不要でした。これが無くても問題なく横幅を広げられるようです。ただし、他の要素との関係で、【 positoin:relative; 】の指定がないと上手くいかないことがあったので、適宜追記して頂くといいと思います。なんかうまくいかない時は、position プロパティを疑ってください。
要するに、以下をスタイルシートに追記すればOKです。
html {
overflow: auto;
}
body {
overflow: hidden;
}
そして、ブラウザいっぱいに広げたい要素にネガティブマージンとパディングを指定します。この書き方に関しても、まとめて記述するより分けて記述した方が安全です。なぜなら、元々上下にマージンやパディングが指定されていた場合、うっかりその指定を打ち消してしまう可能性があるからです。そういうわけで、以下のような書き方がいいと思います。
#example {
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}
Twenty Eleven の場合、記述する場所は以下のようになります。
| ヘッダー | #branding |
|---|---|
| グロナビメニュー | #access |
| フッター | #site-generator |
| フッター（ウィジェット部分） | #supplementary |
画面いっぱいに広げたい要素のidと【 #example 】を置き換えてください。
さて、以上でうまくいくはずです。画像じゃ分かりにくいですが、スマホで表示した際にレスポンシブデザインに対応しています。
ぜひ試してみて、そして実際に確認してみてください。
使い分けとしては、、、
- トップページやアーカイブページなどでは抜粋表示
- 記事全文を読みたい場合の個別投稿ページでは全文表示
というのがベターだと思います。
しかし、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 です。
簡単ですね。ぜひ試してみてください。
そこで、こちらの「ヘッダー右上に連絡先やお問い合わせリンクを表示させる方法」という記事にて、右上に連絡先情報を表示する方法をまとめました。
WordPress の Twenty Eleven というテーマをカスタマイズする方法ですが、他のテンプレートでも考え方は同じなので、応用できると思います。
連絡先公開にはリスクもある
しかし、連絡先情報を公開したいけど、色々不安な点もあると思います。例えばメールアドレスをそのまま記載すると、メールアドレス回収ロボットに拾われてしまう可能性があります。するとスパムメールや営業メールが届きやすくなってしまいます（なのでロボットに拾われないようにアドレスの@を、★などの記号で表示させている人も多いですよね）。
また、電話番号や住所だって回収されないとも限りません。ビジネスをするからには連絡先の公開は当然ですが、それをそのまま公開すると検索対象にもなりますし、小さな個人商店やフリーで活動している方、または副業でビジネスをしている方など、公開をためらう人もいると思います。
連絡先情報を検索されないようにする方法
そこで、電話番号や住所などを文字（テキスト情報）としてではなく、画像として公開することで、検索対象やロボットの回収対象から逃れようという方法があります。画像なので、ファイル名から連絡先だと分かってしまったり、alt などでテキスト情報と関連づけていない限り、今のところ Google 先生にも発見されませんし、人の目でしか確認できないということになります。
手書きで書きなぐられた文字ならまだしも、パソコンで作った画像の文字ならほぼ確実に分かってしまうでしょうね。
なので、この方法は気休め程度に考えておいた方がいいと思います。
Twenty Elevenのヘッダーに画像を用いる時の注意点
ただ、Twenty Eleven のヘッダー部分に、ヘッダー画像以外の画像を挿入すると、ちょっと困ったことになるかと思います。
ポイントは “ヘッダー画像以外の画像” という部分。普通はヘッダーに 2 つ以上の画像を挿入することなんてないかもしれません。しかし今回のようにお問い合わせ情報を画像で表示させる場合、その画像にはお問い合わせページへのリンクなど、本来ヘッダー画像がリンクしているトップページとは違うリンクを貼らなければなりません。
その際に困った事にならないように CSS を整える必要があります。この記事は主にその話題です。
とりあえずヘッダー部分に画像を埋め込んでみる
ヘッダー部分に画像を表示させようとするとどうなるのか？
ここでは、いわゆるデフォルトで設定できる画像とは別に、ヘッダー部分に直接イメージタグを書き込んだ場合、という意味です。例えば以下のように【 header.php 】を開いて、タイトル部分の下にでもイメージタグを書き込んでみましょう。
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> /* ▼ hgroupの下にイメージタグを挿入 */ <img alt="" src="（イメージのURL）" />
イメージは 240×180 の大きさで、こちらの画像を用意しました。
すると・・・
使用している画像は、240×180 の大きさです。にも関わらず、サイトの横幅（1000px）に合わせてかなり拡大されています。
なぜ、こんなことになってしまうのでしょうか？
ヘッダー画像は CSS でどのように指定されているのか？
ヘッダー部分に挿入した画像は、みな一様に横幅 1000px に矯正されてしまうみたいですが、これはどこで指定されているのでしょうか？ 親テーマの CSS を見てみると、545 行目辺りに【 #branding img 】という項目があります。
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%;
}
これは、【 #branding 】という id で指定されている範囲にある img タグに該当するもの全てに適用されます。img ってことはイメージファイル全てってことですね。そのため、100% とか、マージンの値とか、デフォルトのヘッダー画像だけでなく、自分でタグ打ちして挿入した画像にも適用されてしまい、サイトの横幅 1000px（100%）に合わせて画像が拡大表示されてしまっているわけです。
まぁヘッダーは画像を 1 枚しか使わない場合がほとんどだと思いますので、あまり問題に感じた事のある方も少ないかもしれません。しかし、これはロゴだろうがなんだろうが、ヘッダー内で画像（img タグ）を使う際は影響を受けてしまう記述なので、気をつけておかないといけません。
ヘッダーに挿入した２枚目の画像のレイアウトを整える
さて、原因は分かりましたが、問題はどう解決するかです。いくつか方法はあると思いますが、今回は【 #branding img 】の記述はいじらずに、新たに追加した画像（連絡先情報用の画像）だけに別途スタイルを指定する方法で行きたいと思います。
(1) イメージタグを<div>で囲む
まずはイメージタグに id を指定しましょう。【 header.php 】に追記したイメージタグを、以下のように<div>で囲ってしまえば OK ですね。あと、別にお問い合わせフォームのページを用意している場合は、リンクタグを埋め込んでおきましょう。
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> /* ▼ divで囲ってidを指定する */ <div id="contact"><a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>
(2) 追記したidのレイアウトを CSS で調整する
指定した id をスタイルシート側で調整していきましょう。右上に表示させたいので、回り込み（float）を使ったり、大きさの指定をしたり、余白の調節をしたりします。
#contact {
float: right; /* 回り込み指定 */
width: 24%; /* イメージのサイズに合わせて */
margin-right: 7.6%; /* お好みで余白を指定 */
padding-top: 3.65625em; /* お好みで余白を指定 */
}
横幅はピクセル値に合わせてパーセンテージで指定した方がいいと思います。パーセンテージで指定しておくと、ブラウザの大きさやサイトを拡大・縮小に合わせてバランスを保ってくれます。
Twenty Eleven の場合は 100% ＝ 1000px なので、横幅 240px の画像を用意した場合は 24% にしておけば OK です。
(3) タイトル部分の余白を調整する
画像を右へ回り込ませても、タイトル部分がそのままなので、回り込みを指定する必要があります。タイトル部分にも横幅やマージンが指定されているため、画像がうまく回り込んでくれない可能性があります。Firefox のプラグイン、Firebug などで確認しながら適切な余白を指定してください。
#branding hgroup {
float: left; /* 回り込み指定 */
width: 60%;
margin-right: 0px;
}
/* ▼ サイトタイトルや説明書きの余白も無くしました */
#site-title {
margin-right: 0px;
}
#site-description {
margin-right: 0px;
}
まとめ
これで右上に連絡先情報を画像で表示させることができました。もし、あなたがTwenty Elevenを使っているならコピペですぐにできるように、以下に使用タグをまとめておきます。ぜひ役立ててください。
header.php の変更内容
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> /* ▼ hgroupの下にイメージタグやリンクタグを挿入 */ <div id="contact">/* idの指定も忘れずに（名称は任意で） */<a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>
style.css の変更内容
#contact {
float: right; /* 回り込み指定 */
width: 24%; /* イメージのサイズに合わせて */
margin-right: 7.6%; /* お好みで余白を指定 */
padding-top: 3.65625em; /* お好みで余白を指定 */
}
#branding hgroup {
float: left; /* 回り込み指定 */
width: 60%; /* サイトタイトルなどの長さに合わせて調節 */
margin-right: 0px; /* お好みで余白を指定 */
}
/* ▼ 画像を回り込ませる余裕を確保できるように調節 */
#site-title {
margin-right: 0px; /* お好みで余白を指定 */
}
#site-description {
margin-right: 0px; /* お好みで余白を指定 */
}
]]>
ワードプレスのアップグレードの時と同じパターンかな？・・・ということで、きっとプラグインのせいなんだろうな〜と思ってとりあえずプラグインを全停止してみたら、ちゃんとテーマカスタマイザーが使えるようになりました。
テーマカスタマイザーがエラーになる原因は？
では、一体どのプラグインが原因なのか？ ということになってきます。
怪しいのは【Twenty Eleven Theme Extensions】ですね。これは Twenty Eleven の機能を拡張してくれるプラグインです。個別記事ページ（single.php）は通常サイドバーが表示されないんですが、これがあると CSS やテンプレートファイルをいじらずに簡単に個別記事ページにサイドバーを表示してくれたので重宝しておりました。
でもこのプラグインだけを停止してみると・・・案の定テーマカスタマイザーは正常に動きました。そしてまた Twenty Eleven Theme Extensions を有効化してみると、、、またもやエラー。やっぱりこのプラグインが原因だったようです。
今のところ（2012.6.16現在）、Twenty Eleven Theme Extensions は最新バージョンの WordPress には対応していないようで、テーマカスタマイザーはとりあえず使えないようです。
もし、あなたが Twenty Eleven を使っていて、WordPress3.4 のテーマカスタマイザーの機能が利用できないとお困りの場合は、もしかしたら Twenty Eleven Theme Extensions が有効化されているのかもしれないですね。
ぼくの場合は今のところテーマカスタマイザーは使いそうにないので、とりあえずプラグインは有効化したままにしました。
不具合発生時は問題のプラグインをチェックしよう
今回の件に限らず、何か不具合があって WordPress が表示されないなどの不具合がおきた場合。プラグインが原因の可能性が考えられますので、まずは以下の手順を試してみましょう。
(1) プラグイン一度全部停止させる
プラグインの影響で不具合が出ているかどうかを確認するため、一旦全てのプラグインを停止します。プラグイン一覧のページで全てのプラグインにチェックを入れ、一括停止すれば簡単ですね。
管理画面（ダッシュボード）へログインできない場合
もし不具合の影響で管理画面（ダッシュボード）にログインできない場合は、FTP から直接サーバー上の plugins フォルダへアクセスし以下の手順でプラグインを停止状態にします。
これで WordPress の管理画面へログインできるようになるはずです。この状態でプラグインのページに行くと、停止状態のプラグインが確認できると思います。
(2) 一旦サイトをチェック
ここでサイトをチェックしましょう。不具合が出ていた部分はどうなっていますか？ 解消されていればやはりプラグインが原因だったということになります。変化がない場合は、、、他の原因ということになるので、ググって情報を集めてみましょう・・・。
(3)１個１個有効化してチェック
改めてプラグインのページに戻り、1 つ 1 つ有効化してはサイトをチェックしていきます。いずれ不具合が発生するプラグインを特定できるはずです。
1 個 1 個チェックするのは面倒かもしれませんが、たぶん今のところこれしか方法がないと思われますので、根気づよく頑張ってください。
怪しいプラグインから試してみるのもアリです。ぼくはそれですぐに判明できましたし。
また複数のプラグインが影響しあっている可能性もあります。1 つ発見したからといって安心しないように。
この WordPress サイト（テーマはTwenty Eleven）に関しては、明らかに Twenty Eleven Theme Extensions が原因と思われたテーマカスタマイザーの不具合ですが、どうも別で管理しているWordPress サイトでは Twenty Eleven Theme Extensions を有効化していても問題なく機能していました。
となると何か他に根本的な原因があるのかもしれません・・・。
とにかく、今回学んだ事は、アップデートで不具合が合った時は、プラグインを停止させてチェックしてみるということです。
ただ、よくよく WordPress の Codex に、WordPress を手動でアップグレードする際は必ずプラグインを停止させてください、と書かれていました。でもまぁ自動アップグレードの場合も基本は同じでしょう。
他にも色々と大事なことがたくさん。ちゃんと基本から押さえておかないとダメですね。
＞ WordPress のアップグレード/詳細
真偽のほどは分かりませんが、SEO 的にも右上に連絡先情報を表示することは推奨されているのだそうな。また、右利きの人が多いので右側にクリックされやすいものを持ってくるというのは有効なようです（広告も然り）。
それに“右上にはお問い合わせ情報がある！”というのも、結構浸透している気がしますし、訪問者が「お問い合わせしたいな・・・」と思い立った時に、無意識に右上を確認する可能性も高いと言えるでしょう。そういった点からも、右上に連絡先やお問い合わせリンクを表示させるのは有効だと思います。
ヘッダースペースにタイトルとは別の内容を表示させなければならない
たぶん、カスタマイズする上で一番ひっかるんじゃないだろうかという点が、これです。
タイトルが左側、連絡先などの情報やリンクは右側に表示させ、かつタイトルをクリックしたらトップページへ、連絡先情報からはお問い合わせフォームへリンクさせたいわけです。
一枚のヘッダー画像にタイトルとお問い合わせ情報を盛り込んでもいいのですが、これだとリンク先を分けることができません（ヘッダー画像をクリックすると基本的にはトップページへ移動します）。リンクは貼らずに、電話番号を表示させるだけなら構わないのですが、今回はタイトルリンクと連絡先情報のリンクを分ける事を目的に話を進めて行きたいと思います。
そういうわけで、今回目指す理想の形はこんな感じです！
サイトの右上（タイトル右横）にテキストとして連絡先を表示させる方法
まずは基本的な感じで、右上に連絡先情報をテキスト表示させてみたいと思います。ちなみに取り扱っているテンプレートは Twenty Eleven ですが、基本的な考え方は一緒なので、ほぼ全てのテンプレートでも同じようにできるかと思います。
まず該当するテンプレートファイルは【 header.php 】ですね。PHP とは言っても、ホームページの基本は HTML で書かれているので、普通に HTML の感覚で文字やタグを打ち込んでいきましょう。場所はタイトルスペースに関して指定している【 hgroup 】の後がいいですね（Twenty Eleven の 76 行目辺りです）。
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> 0120-222-3333 <!-- ここに電話番号を入力しただけ -->
とりあえず電話番号を打ち込んでみました。特に class や id も指定していない生な感じです。するとこんな感じでタイトルとヘッダー画像の間に電話番号が表示されます。
そう、住所だろうが電話番号だろうが、ただ書き込めばいいだけなんですね。簡単すぎます。でもこれじゃあ目的とする表示方法じゃないしかっこ悪いので、CSS なんかでレイアウトを指定していきます。と、その前に右上の検索窓が邪魔なので消しちゃいましょう。
下準備：header.phpへの指定
連絡先は連絡先だと分かるように、Google さんに教えてあげましょう！
<address> というタグがあります。「連絡先や問い合わせ先を示す場合に使用する」となっています。というわけで、まずはこのタグで連絡先を囲ってあげます。そしてカスタマイズしやすいように電話番号に class を指定しましょう。
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <!-- ▼ 連絡先情報をaddressタグで囲って、各情報にも class や id を指定 ▼ --> <address> <div class="tel">0120-222-3333</div> <div class="hours">営業時間 9:00〜18:00</div> </address>
以上で【 header.php 】側の変更は終わりです。必要があれば適宜電話番号以外の情報も盛り込んでいってください。その際連絡先に関しては <address> 〜 </address> のタグの中に書き込むようにしてください（営業時間は別枠がいいかも・・・）。
連絡先情報を右上に持って行くためのCSSの指定方法
さて、続いて CSS 側の設定です。子テーマの【 style.css 】を開いてください。理屈的なことを言うと、【 hgroup 】と【 address 】の部分を回り込ませればいいということになります。
まずは【 #branding hgroup 】です。親テーマの style.css では 79 行目にあります。ここのタイトル部分は左側に表示させたいので、【 float: left; 】で回り込ませます。さらに横幅は 100％ になっているので、右側に連絡先を表示させるスペースを確保するために横幅を狭めておきましょう。以下の例では 68% まで縮めましたが、右側に連絡先が入るスペースができればいくらでも構いません。
また、マージンも左右に 7.6% ずつスペースを取っているので、ここを変えてもいいと思います。具体的には、【 margin: 0 1% 0 7.6%;】のようにして、左マージンは今までの値、右マージンは小さな値にするといいでしょう。
#branding hgroup {
margin: 0 7.6%;
float: left;
width: 68%;
}
そして【 address 】側の指定ですが、ここは【 #branding address 】とすることで指定できます。以下のように追記しておきましょう。
#branding hgroup {
margin: 0 7.6%;
float: left;
width: 68%;
}
#branding address {
float: right;
width: 16.8%;
padding-top: 3.65625em; /* タイトルのpaddingと同じ値にしました */
}
するとこんな感じで連絡先を右上に表示させることができます。
まぁこのままだと不格好なので、CSS で色々指定して体裁を整えてください。
うまくいかない場合は余白（マージン）に注意！
もしかしたら、フロートで回り込みを指定しても、タイトルと同じ列の右横に移動せずに、タイトルの下の列でただ右に移動しただけのように見えることがあるかもしれません。
ただ、これは hgroup や address の横幅が広すぎて、回り込むスペースが確保されていないことが原因だと思われます。ですので、上記では【 width 】を指定していますが、横幅が合計で 100% を超えるような値にしてはいけないわけです。
例えば Twenty Eleven の場合、デフォルトでは 100% ＝ 1000px なので、【 hgroup 】が 680px、その余白が左右に 76px ずつで合計 832px あることになります。ですので、【 address 】は残りの168pxよりも小さくなければいけません。これより大きいと 1000px（＝100%）を超えてしまって回り込む隙間がありませんので・・・。
なので、【 address 】 の横幅は 16.8% にしたわけです。
その他、【 #site-title 】（サイトタイトル）や【 #site-description 】（サイトタイトル下の説明文）でもマージンやパディングといった余白が指定されていますので、それらも含めて間隔を調節しましょう。
参考までに以下の図を確認してください。
赤はマージン（margin）、青はパディング（padding）、緑は横幅（width）を表していて、ほとんどが Twenty Eleven のスタイルシート上でデフォルトとして指定されています。
記載場所もばらばらなので、各々変更したい場合は上の図を参考に id などで検索してみてください。
回り込んだら元に戻す
あと、忘れては行けないのが回り込みの解除ですね。恐らくヘッダータイトルの後にはヘッダー画像が来ている人が多いかと思いますので、【 #branding img 】（親テーマでは 545 行目）の部分に【 clear: both; 】を指定しておきましょう。とは言ったものの、指定しなくてもレイアウトは崩れなさそうなので、無くてもいいのかもしれません。けど念のため・・・。
ついでに言うと、Twenty Eleven は hgroup、address ともに、既に【 display: block; 】というようにブロック要素が指定されています。ですので、フロートが使えるんでしょうね〜・・・。
サイトの右上（タイトル右横）からお問い合わせフォームへリンクさせる方法
今度はリンクを指定したいと思います。方法は前述と同じで、テキストの部分にリンクタグを指定すればいいだけです。
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <address> <div class="tel">0120-222-3333</div> <div class="hours">営業時間 9:00〜18:00</div> <div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div> </address>
さらに header.php や CSS の方などを色々カスタマイズすると、こんな感じで表示できます。
お問い合わせリンクをボタン風にしたり
連絡先情報の文字を CSS でカスタマイズする
上の図のような表示を最終目標として、必要なソースタグなんかをご紹介します。
header.php の変更内容
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <address> <div class="address">〒000-0000 ●●市1-1-1</div> <div class="tel">0120-222-3333</div> <div class="hours">営業時間 : 9:00〜18:00(平日)</div> <div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div> </address>
style.css の変更内容
/* branding内の指定 */
#branding hgroup {
margin: 0 7.6%;
width: 48%; /* 横幅を48%まで狭めました */
float: left;
}
#branding address {
float: right;
width: 26.8%; /* 横幅を26.8%まで広げました */
margin-right: 7.6%; /* バランスを整えるために右マージンを追記 */
padding-top: 3.65625em;
}
/* サイトタイトルと補足説明のマージンを変更 */
#site-title {
margin-right: 70px; /* デフォルトは270pxでしたが、70pxに */
padding: 3.65625em 0 0;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 70px 3.65625em 0; /* 右マージンのデフォルトは270pxでしたが、70pxに */
}
/* 以下を追記（クラス名はheader.phpと合わせてお好みで変更してください） */
.address {
font-size: small;
}
.tel {
font-size: xx-large;
text-shadow: 1px 0px 2px #666666;
}
.hours {
font-size: small;
}
.contact {
margin-top: .5em;
text-align: center;
}
.contact a {
display: block;
/* ボタンジェネレーターで作成したソースコード */
color: #ffffff;
font-size: large;
padding: 10px;
text-decoration: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: 0px 1px 2px #666666;
-moz-box-shadow: 0px 1px 2px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #cacbcc 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#003366));
background: -moz-linear-gradient(top, #42aaff, #003366);
}
.contact a:hover {
background: #42aaff;
/* ボタンジェネレーターで作成したソースコードここまで */
}
お問い合わせフォームへのリンク部分は、ボタンのデザインが簡単にできるブラウザ上の CSS ジェネレーターを使って作成しました。ジェネレーターでつくったタグをコピペしただけです。
そのサイトはこちらです。
＞ {CSS}Portalのボタンジェネレーター
ぼくなんかの CSS 素人にはかなり重宝させて頂いているサイトです。こった CSS のデザインが難しいとか、作業時間を短縮したいという方はぜひご活用を。
お問い合わせリンクに画像を使いたい場合
住所や電話番号をテキストとして掲載しておくと検索対象になってしまうので、不安に思っていらっしゃる方も多いかと思います。なので、電話番号などを公開したいけど、画像表示で公開したいという方も多いはずです。
そんな場合は電話番号や住所などの乗った画像を用意してアップロードすればいいのですが、ヘッダーに画像を表示させる場合は CSS 的に注意しないといけないことがあって、たぶん、普通に画像を表示させただけだとレイアウトが崩れたりするかもしれません。
というわけでレイアウトが崩れないよにヘッダーにヘッダー画像以外の画像を指定する方法を、、、別途まとめたいと思います。
]]>
もしかしてこんな感じに見えていませんか？
ぼくは Mac を使ってますが、Safari も Chrome も「次へ→」という部分の「次へ」と矢印部分がなぜか改行されて見えてしまうのです。IE環境での表示は確認してませんが、Firefox のみちゃんと一列に表示されています。
ナビゲーションの「次へ」と「→（矢印）」を
一列に表示したい！
つまりこうしたいわけです。
これは CSS をちょっと変更すればうまく整いました。
まず Twenty Eleven のテーマファイルの【style.css】を開いてだいたい 1700 行目に差し掛かる辺りから【=Navigation】という部分がでてきます。その最後の方に【Singular navigation】という項目がありますが、その一部を以下のように変更します。
【該当箇所】
#nav-single .nav-previous,
#nav-single .nav-next {
float: none;
width: auto;
}
【変更後】
#nav-single .nav-previous,
#nav-single .nav-next {
float: left; /* 左に回り込むように指定 */
width: auto;
}
ナビゲーションの「前へ」と「次へ」に関する部分の回り込みが【none】となっていたので、【float: left;】というように左に回り込ませています。こうすると、ナビゲーションの「←前へ」と「次へ→」が一列にきれいに表示されるようになります。
ちょっと気になる点が・・・
でも、よくよく見ると、「←前へ」と「次へ→」の間が、以前より狭まってしまっていると思いませんか？ なので、この間隔を若干広げたいと思います。
先ほどの箇所のすぐ下にある以下の部分【#nav-single .nav-next】の padding をちょっとだけ広げてみてください。ぼくの場合は 0.5em だったのを 1em にしました。
#nav-single .nav-next {
padding-left: 1em;
}
これで、このように「前へ」と「次へ」間隔が広がって、元の間隔と同じくらいの表示なります。
以上です。