Category: PHP

AJAX 入門講座

AJAXというメソッドが世に出てからしばらく経ちますが、一般のウェブサイトなどで活用されたわけでもなかったが、ここ最近になってWebアプリケーションの中でUI/UXの重要性がたかまったことで、注目をより集め始めました。AJAX自体はプログラミング言語ではなく、Webページに対してJavaScriptを活用する新しい方法と呼べると思います。この新しいテクノロジーはWebページをより速くしたりユーザーフレンドリーにしたりと、機能全般的により効率のよいものにしてくれます。 AJAXは「Asynchronous JavaScript and XML」の略で、JavaScriptを経由してサーバとの双方向のやり取りや更新に使用され、画面遷移せずとも部分的な更新を可能にしてくれます。今回のアーティクルではWebサイトにAJAXを実装する為に必要な基本的なことをカバーしていきたいと思います。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 JavaScriptを知ってれば余裕♪ もしJavaScriptの基本を少しでも知ってたら、AJAXを理解するのにそう時間はかからないと思いますよ。JavaScriptを使えば、ユーザーと相互作用(インタラクト)するようなWebページを作ることが出来ますよね。ユーザーとのインタラクションに基づき、必要な時にサーバのレスポンスに応じてWebページの内容を送信、受信、更新することが出来ます。 ではここにシンプルなボタンがあるとしましょう。そしてこのボタンはWebページの何かしらのデータを更新する為に使われるものとします。勿論更新する為のデータ収集用の入力フィールドもあると想像してください。 <button onclick=”updateProfile()” type=”button”>Update</button> 上記のボタンコードで分かるように、ボタンをクリックすると「updateProfile()」というJavaScriptの関数を呼び出すことが出来ます。もし既にJavaScriptをご存知でしたらもうここら辺は余裕だと思います。scriptタグ間で定義されている関数が呼び出されます。 <script type=”text/javascript”> function updateProfile(){ // JavaScript code to be executed } </script> こういったscriptタグやその内部のコードなどは、bodyタグの直前に配置するのが通例となっています。またサイトの構築方法やページに対する特別なニーズにもよりますが、JavaScriptはヘッダー内に配置することも可能です。勿論JavaScriptファイル(拡張子.js)に配置して、ヘッダー部分で読み込むのが無難です。 さて、これでボタンが押された時に実行したいコードを関数内に配置出来ます。この辺も特に目新しいことはないかと・・・。従来のJavaScriptではサーバからのデータをそれ以上必要としない限り、そのページ内に既に存在しているコンテンツを自由に操作することが出来ましたよね。Freelance Finances Calculatorなんかは、JavaScript使用例の良い例だと思いますよ。 もし更にサーバからの情報が必要な場合は、サーバサイド・スクリプト言語を使ってページを再読込みさせる必要がありました。ここでAJAXの出番です!「updateProfile()」関数内にJavaScriptを介してサーバと通信する為のAJAXコードを記述すれば、ページを再読込みすることなく、必要に応じてサーバ上のデータを取得、更新、削除することが出来るようになります。 <script type=”text/javascript”> function updateProfile(){ // JavaScript code to be executed // AJAX code will go here as well! } </script> XMLHttpRequestとActiveXObject Objects AJAXを使用するにはまずブラウザに「サーバと通信しますよ」と伝える必要があります。JavaScriptにはAJAXが動作する為の手助けとなるオブジェクトが2つあります。それが「XMLHttpRequest」と「ActiveXObject Objects」です。これらのオブジェクトはJavaScriptによるオブジェクト指向の基礎となる部分なので、今ここでオブジェクト指向の概念を理解したり実装する必要はありません。またそれは追って説明していきますね。 どちらのオブジェクトもWebページの裏側でサーバとデータを交換したり処理したりと同じことを行いますが、サポートするブラウザが異なります。 「AJAXを使いますよ」とブラウザに伝えるには、以下のコードを使用します。(W3Schoolsから拝借) <script type=”text/javascript”> function updateProfile(){ // Create a variable to refer to our request object: var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } } </script> 上記のコードは極めてシンプルです。まずオブジェクトを保持する変数を作成します。このオブジェクトは「XMLHttpRequest」か「ActiveXObject Objects」のどちらかになります。(けれどどちらもすることは同じです。)もしブラウザがwindow.XMLHttpRequest経由で「XMLHttpRequest」をサポート可能と検出出来るならオブジェクトを「XMLHttpRequest」に設定します。そうでないなら「ActiveXObject Objects」に設定します。 WEBサイトでAJAXを使用する場合は、いつもここからスタートすることになります。もし複数の関数を使用している場合、全関数の前にこのコードを宣言するのはあまりいいアイデアではないと思います。複数の関数を使用する場合は、ページロード時に変数を設定する方が効率的だと思います。 サーバからのレスポンス受信 これでAJAXをブラウザで使用する為の準備は整ったので、ここからがお楽しみパートです。サーバとの通信に移りましょう。ブラウザによってどのリクエストオブジェクトが使用されようと、AJAXを介してサーバから情報を取得したり送信したり操作する為に使用可能な事前定義された関数があります。 1つ目の事前定義プロパティは「onreadystatechange」です。何をするプロパティかと言うと、もうそのまま読んで字のごとくなのですが「readyState」が変更されると、自動的に保持している関数をコールしてくれます。「readyState」は単に「処理中」「ダウンロード中」「完了」といったオブジェクトの状態を示します。 xmlhttp.onreadystatechange = function(){ // This code will

詳細を読む »

CSSツール・ジェネレーター お役立ちツール

WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。 CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSツールとジェネレーター

詳細を読む »

WordPressのセキュリティを徹底強化

WordPressは今やもうインターネットで利用されている最も有名なコンテンツマネジメントシステムと言って間違いないかと思います。最初の頃こそ様々な批判を数多く受けましたが、Automattic社はその度にきちんと問題解決を行ってきました。ほどなくしてWordPressは有名なコンテンツマネジメントシステムの成長をサポートしてきた多数のブランドに採用されました。オープンソースであることは、ハッカーからの攻撃に対し脆弱性があるともいえます。その為WordPressで作られてサイトのWEBマスターは、セキュリティ上の問題を決して軽視してはいけません。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 私自身過去5年間ブロガーとして過ごしてきて、所有者の視点からのブログの重要性を理解しているつもりです。今回の記事では読者のみなさんがWordPressのセキュリティ問題への理解を深め、またどのように対処したらよいか理解するお手伝いが出来たらと思っております。そして今後もこのシリーズは続けていくつもりです。 注意書き: この記事にあるテストを始める前に、必ずWordPressブログのバックアップを取って下さい。かわいい我が子の挙動がおかしくなったら困りますものね。(その際、後述するWP Security Scanプログインを使用してください。) この記事ではプラグインの使用方法のみならず、手動で実行する方法も記述していきます。読者のみなさんは卓越したWEBマスターたちは、WordPressで全てのタスクをこなす為にプラグインに頼ったりしないと言うことを覚えておかなければなりません。また複数のプラグインを使用すると空きメモリを喰うので、動作が遅くなる傾向があることも覚えておきましょう。最後にWEBマスターたるもの、知識領域を増やす為に手動での方法をも試すべきだとも思いますよ。    WordPressのセキュリティ強化    初めに・・・(自動インストールは無しです) ホスティング企業はWordPressのインストールを非常に簡単なものにしました。今の今まで一度もコーディングをしたことが無いような人でも、あっという間にブログをアップすることが出来ます。ホスティング企業はWordPressのインストールを超簡単にするためにFantasticoとcPanelのようなツールを統合しました。そのようなツールはパッと見とても有効に思えますが、WEBマスターにとって本当に有益であるかはまだ証明されていません。 手動でWordPressをインストールすると、データベース内のテーブルに自分の好きなプレフィックス(接頭辞)を付けることが出来ます。ちなみにデフォルトでは全てのテーブルにwp_というプレフィックスが使われており、このプレフィックスを変更しなければ、ハッカーのお仕事を半分手伝ってしまったことになります。その為自分で変更したカスタムプレフィックスをお使いになることをお勧めします。この作業は後述するプラグイン、または手動でのWordPressインストール中にwp-config.phpを書き換える事により可能となります。 それでは、インストールを始める前にwp-config.phpを開き、コードを下記の様に別のものに変更して下さい: ↓自分の好みのプレフィックスに変える↓ 既に稼働中のブログを変更する場合、wp_プレフィックスを変更するには以下の様に2つの追加作業が必要となります。 1. phpMyAdminを使ってWordPressデータベースにログインし、全てのテーブルネームをカスタムプレフィックスに変更してください。 2. 「optionsテーブル」と「usermetaテーブル」内の幾つかのフィールドでもwp_プレフィックスが使われている可能性があるので、以下のクエリーを走らせてプレフィックスを変更してください。 お役立ちプラグイン WP Security Scanというプラグインはデフォルトのwp_プレフィックスを別のものに変更してくれます。インストールした後に「Security」>「Database」へ進んでインストラクションに従ってください。    スパマー対策「Akismet」 あまりに有名過ぎるアンチスパムプラグインAkismetのことをご存じない方はいらっしゃらないかとは思いますが、この先Akismet無しで進むことは、スパマーたちに対して「さぁどうぞ私のブログにスパムコメントを書き込んでください!」と両手を広げて歓迎しているような状態になってしまい非常に危険なので、念のためここに書いておきますね。Akismetは必須です!!    「SALT」 SALTはWordPressのパスワードのセキュリティを強化するシークレットキー認証方式です。パスワードをソルトすると、ここで生成される複雑なハッシュ文字列(ここではページがリフレッシュされる度に、ランダムハッシュ文字が生成されています。)を付加することにより、ブルートフォース攻撃からWordPressのインストールをを保護します。データベース証明書のすぐ下にある8行のコードをwp-config.phpファイルにコピーして下さい。これだけで完成です♪ まず、もしWordPress 2.5かそれより新しいバージョンのWordPressをインストールして使っているのであれば、wp-config.phpファイルにシークレットキーが既に存在するはずです。そのデフォルト値はハッカーたちに知れ渡っているので、この値も変更すべきです。次に、元々WordPress 2.5より古いバージョンのWordPressを使っていて、それをアップデートして今でも使用しているのであれば、wp-config.phpファイルに手動で追加する必要があります。 お役立ちプラグイン Chap Secure LoginプラグインはWordPressログインをまた別の方法で保護します。プラグインを有効にした後、暗号化されないで転送される文字列はユーザー名のみです。パスワードは複雑なMD5アルゴニズムでハッシュされます。またゼロ設定のプラグインであるため、コンフィグ変更を行う必要もありません。 注意書き: インストール後の初回ログイン時は必ず失敗しますが、2回目は成功します。なので、プラグインのインストール後の初回ログインに失敗しても慌てず、もう一度パスワードを入力してください。    ログイン試行制限 WordPressのログインセキュリティに関して論ずるのであれば、セキュリティ強化の為に別の機能を追加するというのは、なかなか良いアイデアだとは思いませんか。Login LockDown WordPress pluginプラグインは、WordPressブログへのログイン試行を失敗した特定範囲のIPアドレスをブロックします。このプログインは3回ログインに失敗すると、IPアドレスを1時間ブロックします。この機能はオプションパネルで変更が可能で、管理者には必要に応じてブロックされたIPアドレスを解放するアクセス権があります。    パスワードチェック機能 Login WordPress Password Checkerは複数の筆者がいるブログに便利なプラグインです。このプラグインは、新しいユーザーがパスワードを作成する際に、定義されたリストと照らし合わせ、リスト上のパスワードの使用を禁止します。これにより新しいユーザーが推測されやすい簡単なパスワードを作成することを防ぐことが可能です。 プラグインディレクトリのdictionary.txtファイルにパスワードを追加することも出来ますが、パスワードデータベースが増加すると応答時間も長くなることも頭に入れておいてください。    デフォルトユーザー名のadminは使わない もし私があなたのWordPressインストールをハッキングしようと思ったら、まずWordPressインストール時に使用されるデフォルト値から攻めていきますね。そしてもしあなたがインストールする際にデフォルトユーザー名の「admin」を管理用にそのまま使用されていたとしたら、もう私の仕事は半分は終わったようなものです。あなたのユーザー名は分かってしまっているので、後やらなければならないのはパスワードを推測する事のみです。 管理者ユーザーの変更方法 新しく管理者権限を与えるユーザー名を作成する。 「admin」ユーザーを削除する。 任意のユーザーを削除する前に、削除するユーザーが所有していた投稿やリンクをどのようにするかとWordPressが確認してくるので、「Attribute all posts and links to(すべての投稿とリンクを次のユーザーに割り当てる)」を選択する。    次回「admin」を使ってログインを試みても、もうアカウントは削除済みで存在しないのでお気を付け下さいね。    wp-config.phpファイルの保護 wp-config.phpファイルはWordPress インストールで最も大切なファイルの1つです。このファイル内には、ハッカーがWordPressデータベースへアクセスするのを容易にしてしまうような重要な管理権限が含まれています。その為、.htaccessファイルに以下のコードを加えて下さい。 .htaccessファイルはwwwのルートディレクトリにあるはずです。もしそこに無かったらファイルを新規作成し、上記のコードを追加してください。    ディレクトリ一覧の非表示 先ほどwp-config.phpを保護しましたが、それだけではまだまだ足りません。WordPress インストールには沢山のディレクトリがあり、ちょっとデキるハッカーならば簡単にアクセス出来てしまいます。.htaccessファイルに下記のコードを加えて、パブリックからの閲覧を不可能にさせましょう。 この変更を行うと、変更を行った特定のディレクトリの内のサブディレクトリへのアクセスを無効にします。    パスワード強度の確認 先ほどWordPress Password Checkerのプラグインのところで、他のユーザーが予測されやすい簡単なパスワードを使うことを制限する方法を説明しましたが、こちらのプラグインで更に一歩セキュリティ強化を図れる事間違いなしです。基本的な考え方としては、管理者パスワードにはガールフレンドの名前なんて使わないように!ということです。責めているわけではありませんよ。みんなやることです。 WP Security Scanプラグインは既にインストールされているかと思いますが、ダッシュボードの「Security」オプションメニューの下に「Password Tool」オプションがあるかと思います。それをクリックするとパスワードツールの以下のような画面が表示されるはずです。 強力なパスワードを生成して、何度も忘れてしまうことが無いようにどこかに保存してください。ちなみに上記の画像で赤で表示されているパスワードに意味はありません。     WP_head部分からバージョン情報の削除 WP Security Scanプラグインを既にインストールしていればもう準備万端ですが、1つ確認しておいた方がよいことがあります。WordPress 2.6以降の場合、WP_head部分に自動的にバージョン情報が記されてしまいます。これにより何か問題が発生すると言うことはありませんが、ハッカーに使用バージョンを知られてしまうとハッキングの脆弱性も増してしまうと言えるでしょう。WP Security Scanプラグインは、何も変更を加えなくとも自動的にWP_head部分からこのバージョン情報を隠してくれます。 プラグインインストール後はこのように表示されているはずです。 注意書き: もしあなたが洞窟の奥の方か何かに住んでいて、2.6よりも古いバージョンのWordPressを使用していたとしたら、使用中のテーマから手動でバージョン情報を削除する必要があります。header.phpファイル(Appearance > Editorで見つかるはずです)内で、下記のメタタグを見付けて削除して下さい。もし該当のメタタグが見当たらなかったらラッキーです♪    複数ユーザーへの権限割り当て 今回のステップは複数のユーザーがいるブログにとって非常に重要です。ブログが成長してユーザーの数も増えてきたら、それぞれのユーザーに与える権限をきちんと分析しておいた方がよいでしょう。そして以下のどのプラグインを使用するか選ぶ時期が来たと言えるでしょう。 以前branding our WordPress dashboardという記事で取り上げたプラグインを思い出してみましょうか。Adminimizeは視覚的に変化を与えるだけではなく、あなた自身のダッシュボードだと言う気分にさせてくれます。このプラグインは素晴らしくて、複数ユーザーそれぞれがダッシュボードのメニューやサブメニュー内でどんな作業が出来るのか有効化(もしくは無効化)させることが出来ます。このプラグインを使えば、ほぼすべての機能を有効化(もしくは無効化)させることが出来てしまいます。 注意書き: Role

詳細を読む »

Google Chart APIを使ってQRコードジェネレータを作成

この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ スマートフォンを使って瞬時に情報を取得することが出来る便利さがうけて、QRコードはどんどん広まっています。QRコードのおかげで小さな電話のブラウザにコツコツと長文のURLを入力する必要もなくなり、QRスキャナーでスキャンすれば自動的に電話発信までしてくれます。 ディベロッパーとして、QRコードジェネレータの構築方法を考えたことがありますか?Google Chart APIを使えば、思ったより簡単にQRコードジェネレータを作ることが出来ますよ。それでは早速始めてみましょうか! まずその前に・・・ このチュートリアルを読めば、以下のようなQRコードジェネレータを作り上げることが出来ます。 準備段階として・・・ まずはindex.phpとgen.phpという2つのPHPファイルを作りましょう。 index.php: こちらはユーザーが作成したQRコードイメージのサイズやエンコード、エラー修正を行うフロントページです。 gen.php: こちらはGoogle Chart APIからデータを要求し、iframeを使って上記のindex.phpから呼び出されます。 index.phpファイル コードの最初の部分は、QRコードイメージを作成する為に必要な情報を集める為のHTMLフォームです。フォームのターゲット属性の値が「qrcode-frame」になっていることに注目してください。これでiframe経由で送信するようフォームに指示しています。 コードの2つ目の部分はフォームを送信する為に用いられるiframeです。ここでは、ユーザーがページをリフレッシュせずとも継続してQRコードを作れるようにする為にiframeを使用しています。 それではブラウザでindex.phpを開いてみてください。以下のような感じになっているかと思います。 このシンプルなCSSスタイルのままでは面白くないので、少しスタイルも加えていきましょう。このチュートリアルではPHPの方に焦点を置きたいので、CSSスタイルの詳しい説明は省略しますね。 ではもう一度index.phpを開いてみましょうか。今度はこんな感じになっているかと思います。 gen.phpファイル 下記のコードをgen.phpファイルにコピペしてください。 ページにポストされたデータがある場合に限り、リクエストを実行してください。 $_REQUESTを使ってデータをキャプチャし、別の変数に格納してください。 Google Chart APIでURLを構築し、上記でキャプチャしたデータをURLに追加してください。 Google Chart APIが作成したデータと同じ内容を含むimgタグを出力してください。 早速オリジナルQRコードを生成してみましょう! これでもう完成です!自作のQRコードジェネレータはうまく動いてくれるはずですよ。ブラウザからindex.phpをナビゲートして、必要情報を入力し、「Generate」ボタンを押してみてください。 即座にQRコードが作成されるのを確認出来るかと思いますよ。

詳細を読む »

WordPressのカスタムテンプレートを使って、異なるサイドバーを含むレイアウトを作成

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

詳細を読む »