Category: ワードプレス

WordPressとはWEB上で使われている最大規模のブログプラットフォームの１つで、その知名度の成長とありがたいほどの柔軟性により、静的なWEBサイトのCMSとしての使用される機会も非常に増えています。 　　　 そのようなサイトは主にWordPressのページ機能を中心に構築されておりますが、「ニュース」や「ブログ」ページを作成する為などに、特別カテゴリーの投稿表示を可能にさせておいた方が都合がよいこともあります。今回のアーティクルではカスタムサイドバーやサムネイル等を含め、WEBサイト上でブログページを作成する為のカスタムテンプレートの使い方についてご紹介していきます。 　　　 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 今から作成するもの 画像は一見にしかずなので、それでは作成したい内容をざっと見てみましょう。 まずWEBサイト内に、2つのページを作成します： 左の「Normal page」では、例として「home」と「about」と言うページを作りたいと思います。実際にページ上で表示させたい項目は以下の通りです。 ページコンテンツ 検索ボックスとカレンダーで構成されたサイドバー 右側の「My Blog(or news) page」で表示させたい項目はこちらです。 「ブログ」と名付けるページ内容 最新投稿リスト（1ページに付き3つの投稿と一部のサムネイル） ブログ記事に関連するカスタムサイドバー（RSSリンクとカテゴリーリストから構成） たたき台が完成したので、早速コーディングから始めていきましょう！ 「ブログ」WordPressページテンプレートの作成 まずは先ほどのレイアウトを使いこなす為に、ブログ用の独自のページテンプレートを作成する必要があります。こちらがテンプレート用の全コードです。「blog.php」という名前で保存してください。 それではこれから１つ１つ説明していきましょう。 テンプレートの名前 一行目にはテンプレートの名前を書きましょう。 この「blog_in_blog」の部分はダッシュボードの「ページ属性」＞「テンプレート」の下の所に表示されます。（後程詳しく説明しますね。） ページ内容にの取得 次に「ウェルカム」メッセージページの内容を取得させています。 基本的にはpage.phpに書かれているコードと同じコードです。 投稿の取得 さてではテンプレート内で一番面白くて重要なパートに移りましょうか。下記のコードで投稿部分を取得します。 ここで使用しているquery_posts()ファンクションでは2つのパラメータを使用しています。1つ目は表示させたい投稿のカテゴリーIDでもう1つはページごとの投稿数です。文章で説明すると「カテゴリー3と4と5に割り当てられたすべての投稿を、デフォルトの年次順で、1つのページに付き3つずつ表示させなさい」と指示していることになります。勿論カテゴリーIDはWordPressのインストール自体に依存します。query_postsのパラメータを変更する事は可能ですが、今回の例では1ページ毎に3つずつで丁度いいのではないかと思います。 これらの投稿を表示させるには、get_template_partファンクションでループのデフォルトアーカイブパートを使用します。これにより55文字の抜粋部分と「続きを読む」リンクが表示されます。 ブログページへのテンプレートの割り当て 次のステップは先ほど作成したばかりのテンプレートをブログページに割り当てることです。まずはタイトルブログを作成して、素敵なウェルカムメッセージを書き込みましょう。 それから右側に行って、「ページ属性（Page Attributes）」パネルの「テンプレート（Template）」のドロップダウンメニューから「blog_in_blog」を選んでください。 ページを保存すると、以下のような感じで表示されているはずです。 ちょっとこれではみすぼらしいので投稿サムネイルを加えて、もう少し魅力的なページにしていきましょう。 投稿サムネイルをブログページへ追加 投稿サムネイルの有効化 WordPress 3.0+では投稿サムネイルはあまり簡単なものとは言えません。デフォルトテーマのTwenty Tenをお使いのみなさんの場合は投稿サムネイルは既に有効化されています。この機能が存在するかどうかを確認する為にはfunction.phpファイルを開いて下記のコードがあるか見てみてください。 もし上記のコードがfunction.phpファイルに無かったら、単純ですが、追加しておきましょう。 アイキャッチ画像パネルの追加 デフォルトではそのテーマでサムネイルが有効化されたら、投稿エリアの右側のパネルに「アイキャッチ画像（Featured Image）」が追加されることになっています。 「アイキャッチ画像を設定（Set featured image）」をクリックしてファイルを選択し、「投稿に挿入（insert into post）」ではなく「アイキャッチ画像として使用（Use as featured image）」をクリックします。それから「全ての変更を保存（save all changes）」をクリックしてメディアパート部分は完了です。もし全てうまくいっていたら、アイキャッチ画像パネルに画像が表示されているはずです。次にすることはテンプレートでの画像表示を有効化させることです。 ブログテーマにサムネイルを追加 ここで少しblog.phpファイルに戻ってみましょうか。投稿を表示させる為にループのアーカイブテンプレートパートを使用しました。なので今度はサムネイルをloop.phpに追加する必要があります。 アーカイブに関する行を探しているので、開始行から探してみましょうか。 抜粋記事にならないようにサムネイルを追加するにはthe_post_thumbnail()ファンクションを利用しましょう。 初めの配列（array）で80×80ピクセルの画像サイズを与えています。2つ目の配列（array）では画像用のクラスとalt属性（他の属性に関してはコーデックスをご参照ください）という、ファンクション上で使用可能ないくつかのデフォルト属性を使用しています。 サイドバーのセットアップ 投稿部分も終わってサムネイル部分も終わったので、次にするべきことはサイドバーのカスタマイズです。最初に少し触れましたが、今回2つのサイドバーが必要ですよね。1つはWEBサイトの「Normal page」用でもう1つは「My Blog(or news) page」用でしたね。 ウィジェットエリアのセットアップ Twenty Tenテーマには3つのサイドバーのウィジェットエリアと、4つのフッターが付属しています。管理画面の「外観（Appearances）」＞「ウィジェット（Widgets）」にはサイドバーを作成する為のエリアが2つあります。「primary widget area」は固定ページ用に使用する予定なので、検索ボックスとカレンダーウィジェットを追加しましょう。「secondary widget area」はブログページやアーカイブ、投稿ページ用に使用するので、RSSリンクを表示させる為のfeed text link widgetとカテゴリーウィジェットを追加しましょう。 サイドバー表示の為に条件分岐タグの使用 「blog.phpテンプレートを使用して投稿したら2つ目のウィジェットエリアに表示され、それ以外のテンプレートを使って投稿したら1つ目のウィジェットに表示される」と言うような、とてもシンプルな指示をWordPressに出したかったとしたらどのようにしたらいいと思いますか。あ、それとカテゴリーは投稿にリンクされているので、カテゴリーも2つ目のウィジェットに表示させたいですよね。 ではまずは使用するコードを見てみましょうか。 まずはwp_reset_query();の部分ですが、ページが呼び出された時にクエリーを元の状態に戻すものです。ページ間での衝突を避け条件分岐タグを問題なく動作させる為に必要となってきます。 サイドバーの中核、条件分岐タグに移りましょうか。まず初めにblog.phpテンプレートをブログページに使用したかどうか検出する為に、is_page_template(‘blog.php’)を使用します。is_page_template()という条件分岐タグは、PHP用の拡張子（.php）で保存されているファイルを使用する必要があり、それ以外だと動作しません。また2つ目のサイドバーにカテゴリーを表示する為に、is_category(3,4,5)とis_single()を使ってチェックしています。あとは2つ目のウィジェットエリアを取得する為のコードを記述しています。 1つ目のウィジェットエリアはそれ以外の全てのページで使用されるので、条件のその他の部分に記述します。完成するとこのようになるはずです。 終わりに・・・ さて、これで完成です！今回はWordPressのカスタムテンプレートを使って、カスタムサイドバーのある固定ページとブログページがある基本的なWEBサイトを作成する方法をご紹介しました。勿論コードは改善してテーマに沿った調整する必要はありますけれどね。 カスタムサイドバーなんて必要ないし、もっと簡単なものが作りたい！と言う方は、特定のページを全ての投稿を表示する為のフロントページとして使用することが出来ます。これは「設定（Setting）」＞「表示設定（Readings）」で固定ページにチェックを入れ、特定のページを投稿のフロントページと設定することが出来ます。あとはblog-in-blogと言う面白いプラグインを使うと言う手もあります。

WordPress 3.0のリリースで、人気のコンテンツ管理システムに多くの新機能が実装されました。 今回のチュートリアルではこれらの新機能の全てを活用していただくために、ゼロからWordPress 3.0テーマ（テンプレート）のコーディングの仕方をブログ対応やミニマルテーマも含めご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ワークステーション設定 チュートリアルを開始するにあたり、まずはご使用いただいているコンピュータへサーバ設定をする必要があります。Windowsの場合はXAMPPやWAMP、Macの場合はMAMPなどがよいかと思います。これらのツールによりローカルテスト環境でWordPressのテストをすることが可能となり、プロジェクトの最中にいちいちFTPを使ってファイル転送する必要は無くなります。 コード編集に関しては、Notepad++のご使用を強くお勧めします。シンタックスがハイライト表示されたり、コーディング用のユーザーインターフェースも非常にシンプルでクリーンであったりと、あくまで私の好みである部分が強いのですが、とても使い易いと思います。（それに無料に勝るものはありません！）他にもNotepadやNotepad 2も同様に使い易いと思いますよ。 必要なフォルダとファイルの準備 WordPressインストールを含むフォルダ内で、wp-content/themes/に移動し「New 3.0 Theme」というフォルダを新規作成し、今後このチュートリアルで作成するファイルは全てこのフォルダの中に収納するようにしてください。では下記の画像の様にファイルとフォルダを追加してください： ステップ１－Style.css sytle.cssにはWordPressテンプレートをスタイリングする全ての要素を書き込みます。けれどまず最初は各テンプレートの名前と、著者名とリンク、そして説明とバージョンを宣言しておきましょう。WordPressテーマ作成時には、テーマを動作させるには必ず2つのファイルが必要になると言うことを覚えておいてください。1つ目はこのstyle.cssファイルで、もう1つは今から作成するindex.phpファイルです。 これらのインフォメーションはいつでも変更が可能ですが、作成された定義に影響を与えないようにきちんとコメント内に記述されているか気を付けるようにしてください。 それでは後程テンプレートのPHPファイルに実装する基本的な定義を記述していきましょう。 タグでは単純にWEBサイト上で使用されるフォントの指定や、（自分の好みに応じて）背景色の設定を行ってください。それからテーマに沿って、リンクのスタイル属性の設定やヘッダーの設定も必要です。 #wrapperはWEBページ全体をカバーし、#headerはその字の通りヘッダー部分、#blogは最新のブログ投稿をカバーしており、最後に.sidebarと#footerも、それぞれ与えられた範囲の基本的な定義をしています。こちらに関してはまた後程詳しく説明しますね。 ステップ２－Header.php 次にheader.phpを作成します。現時点ではWEBサイトのロゴとカスタムナビゲーションまで設定しましょう。 全て詳しく説明する必要はないかと思いますが、上記のコードはあなたが作成するテーマのheader.php全てに必要であると言うことだけは、覚えておいてください。 初めにDOCTYPEの宣言し、WordPressの設定で入力したWEBサイト名を表示させるためのスタンダードを使用します。それからWordPress 3.0のスレッドコメントを有効にするstyle.cssとPHPを記述します。 ステップ３－カスタムナビゲーションの追加 ここまででheader.phpに、基本情報とブログの名前をコーディングしました。次にWordPress 3.0で導入された新機能のカスタムナビゲーションメニューを追加しましょう。実際にheader.phpにコードを追加する前に、まずはfunctions.phpを開いてカスタムメニューを有効にするために必要なコードを追加します。 1つ目の方のコメント部分のコードからお分かりいただけるかと思いますが、add_actionはカスタムメニューへのサポートを追加するために使用されており、次にカスタムメニューを「プライマリーメニュー」と名付けて登録しています。さて、ではテーマにメニューを実装するための作業に移りましょう。 そうするためにはまずheader.phpの末尾に以下のコードを追加する必要があります。 これが何を意味するかと言うと、使用されている主な機能は「wp_nav_menu」と、「sort_column」「container_class」「theme_location」です。「sort_column」の働きはと言うと、WordPressのダッシュボードの選択順序がきちんと守られているかを確認します。「container_class」はメニューをスタイリングするために作られたCSSクラスを、選択することを可能にします。最後に「theme_location」は、（現時点ではprimary-menuのみですが）私たちが選んだ場所にメニューを配置することを可能にします。 ステップ４－カスタムナビゲーションのスタイリング カスタムヘッダーナビゲーションを実行しておりますが、現時点では何の変哲もない古めかしいリンクのリストと言う感じで面白くありませんよね。これを修正するにはstyle.cssにnavというクラスを追加します。 .navファイルでご覧いただける通り、ナビゲーションの幅や、背景色、アライン設定、ディスプレイ設定など基本的な宣言を幾つかしています。それからリンクの前に黒丸が出ないように、基本的なULリストの設定もしています。リスト自体は左側にフロートし、相対位置設定もしています。 それではリンクとドロップダウンメニューにスタイルを追加することで、ナビゲーション全体のスタイル設定を完成させましょう。 まずはメニュー部分のリンクをスタイリングすることから始めており、ここからドロップダウンメニューのスタイリングに入ります。「.nav ul ul」の部分では絶対位置設定をし、トップの位置は１００％としています。こうすることにより親リンクの直下に配置することが出来ます。更にドロップダウンリンクを少し目立させる為に背景色も変更しています。そしてZインデックスを99999にすることにより、その下に何があろうとこの要素が他のどの要素よりも一番トップに位置するよう設定しています。 ３つ目のドロップダウンメニューでも違いを出す為に、再び背景色をほんの少しだけ変更しています。配置自体は左側に１００％です。これにより１つ目のドロップダウンよりもずっと右寄りに表示されます。トップの設定は３０％としており、こうすることにより２つ目のドロップダウンと接しているけれども、メニュー全体からは下にずれて表示されます。 最後にドロップダウンメニュー用のリンクをスタイリングします。同様にユーザーがリンクとドロップダウンをホバーした時に、ナビゲーションがどのように表示されるかということも設定します。 ステップ５－Index.php Index.phpはWEBサイトのホームページであり、後述するヘッダーやフッター、サイドバーや最新投稿ブログを表示させるためのコードなどを含んでおり、WordPress 3.0の投稿サムネイル機能を利用しています。 以下のコードはテーマファイル内のどこに配置しようとも、「header.php」「sidebar.php」「footer.php」内の全ての情報をアウトプットする為に使われています。 それ以外はここに書かれているコードは極めてシンプルなものです。header.phpを呼び出した後に少し前に作成した#blogを使い、WordPressブログの最新投稿を表示する為に使うループを呼び出しています。その後で投稿タイトルを、やはり事前に作成しておいたスタイルでラップしています。　　 WordPress 3.0の投稿サムネイル機能をどのように活用するかということは、<?php the_post_thumbnail(); ?>が担っています。そこに書かれているように、このコード自体は次のステップで説明するfunctions.phpの機能をアクティベートするまでは何もしません。 ステップ６－投稿サムネイルを有効にする 先ほどホームページ上で投稿サムネイルが表示されるよう、コードを追加しましたよね。けれどまだその機能をアクティベートしていないので、実際には何も変わっていません。ではここでfunctions.phpを再び開いて、下記のコードをメニューナビゲーションコードの後に来るように追加しましょう。 上記のコードはもうそのものずばりで、書かれている通りの働きをします。二行目のラインで投稿サムネイルへのサポートを追加しており、三行目はサムネイルの厳密なサイズを定義しています。このアーティクルでは横幅520ピクセル、高さ250ピクセルで設定しました。 ステップ７－Sidebar.php ご想像がつくかと思いますが、sidebar.phpはサイトバーで表示させたい情報全てを賄うファイルです。index.php上でsidebar.phpを取得する為のコーディングは既に済んでいるので、今しなければならないことはsidebar.php内に必要情報を追加することだけです。そうすればホームページ上にサイトバーが表示されます。 そうですね。上記がsidebar.phpが機能する為に必要な全てのコートですね。style.cssで作成したdivを呼び出し、その後に続くコードで、WordPressのバックエンドを経由して希望する順番と方法でウィジェットをサイドバーに追加することが出来ます。しかしながら、他の多くの機能と同様に、正常に動作させるためにはfunctions.phpファイルを多少書き換える必要があります。 このコードは、先ほどのsidebar.phpを登録するようWordPressに指示しています。WordPressではもし希望するなら、複数のサイドバーをいとも簡単に取り扱うことが出来ます。けれどこれ以上書くと、この長いチュートリアルが更に長くなってしまうので、もしご興味があればGoogleサーチしてみてください。 ステップ８－Single.php single.phpは、シングルポストページ用に使用するもので、index.phpで書いたコードと殆ど同じです。唯一の違いと言えば、「comments-template」DIVタグとcomennts.phpを読み込むコードを追加したことくらいです。 ステップ９－Comments.php WordPress 3.0のリリースに伴い全WordPressテーマを通してコメントフォームの標準化を進める事は、フックを介して変更することが可能となるのでテーマ作者やプラグイン開発者にとって非常にやり易くなりとても意味のあることです。 以下のコードは各テーマテンプレートにcomments.phpファイルを追加する為のコードです。 このコードにより、テーマに沿った形でコメントフォームが表示されます。もしコメントフォームの更なるカスタマイズにご興味をお持ちでしたら、こちらのWordPress 3.0 Theme Tip the Comment Formというサイトをチェックしてみてください。 ステップ１０－Page.php WordPressでページを作成すると、タイプした内容を表示するには別のファイルが使用されます。そのファイルがpage.phpです。コード自体はsingle.phpとほぼ同じなのですが、このページではコメントテンプレートは省略したいのと、投稿ナビゲーションに少し変更を加えたいのでその辺りが少し変わってきます。けれどそれ以外は全く同じです。 　　　 ステップ１１－Category.php category.phpはユーザーが「特定の投稿カテゴリー」や「投稿時間」「特定の著者」を見るたびに、投稿を表示させる為の情報を提供するファイルとなります。先ほどのpage.phpと同様にコードの殆どがsingle.phpと同じですが、最初の部分だけ少し異なります。 このコードが追加された部分で、WordPressループのすぐ後ろに追加されています。 このコードの役割は、現在ブログのどこを参照しているかを表示する為に大量のPHPのif/elseifステートメントを処理することです。なので例えば「Test Category 1」という特定のカテゴリーを見ているとすると、他のポストより先にまずH2ヘッダーの「Archive for the ‘Test Category 1’ Category:」を表示してくれます。これは一定の日付や著者などに対しても同じ働きをしてくれます。 ステップ１２－背景のカスタマイズとリンクフィード 以前少し触れた通り、WordPress 3.0で実装された機能の1つとして、WordPressのバックエンドを通して画像だったり基本色だったりと背景の作成や変更が可能になったということが挙げられます。 この機能を完全に動作させる為に必要なのは、このたった1行のみです： このようにして、背景のカスタマイズが有効となります。次に同じくらいシンプルなコードを追加します。そうすることにより、関連するリンクフィードがサイト上どこでも使用できるようになります。標準のフィード、コメント、タグ、カテゴリーなどを追加コード無しでヘッダーに加えることが出来ます。 この機能が本来の働きを問題なく出来るように、下記のコードをfunctions.phpに追加しましょう。 ステップ１３－Footer.php 今までの作業を全て完成させる為に、footer.phpファイルを作りましょう。このファイルではstyle.cssで宣言した#footer IDを使用し、基本的な著作権情報や一番下にある最新ストーリーやコメントのRSSフィードリンクを含んでいます。 ステップ１４－その他の機能 ここでは、あまり重要ではないけれど、知ってると便利かもしれない機能を紹介したいと思います。WordPress 3.0のマルチサイト機能で、１つのWordPressをインストールしただけで複数のブログを所有することを可能にします。これもfunctions.phpに追加したいと思います。 まとめ この時点で下書きからWordPress 3.0のテーマを完成させているのではないでしょうか。しかもとても人気のある機能を搭載し、かつ必要最低限のままなので、今後もっとグラフィック的に印象を与えるサイトへと変貌させることも充分可能です。他にこのテーマを使ってどんなことが出来るでしょうか。テーマを変更するだけの基本的なオプションとスタイルは備わっているし、サイドバーを更に追加することだって、How to Create a Better WordPress Options Panel のサイトを使って管理パネルを作ることだって出来ます。