タグ別アーカイブ: WordPress

子テーマを使ったWordPressカスタマイズ（CSS編）

コメントをどうぞ

（前口上が長いので、とりあえずタイトル通りのカスタマイズの方法だけ知りたいという方は、四段落ほど飛ばして読んで下さい）

WordPressカスタマイズ、ダッシュボードの左メニューからの設定変更を初級編とするならば、さしずめ中級編はCSSを用いた各要素の表示変更といったところでしょうか。静的ページのCSSによるレイアウトに習熟された方でも、いつも通りの手順でCSSをいじったが反映されない、あるいはダッシュボードで促されるままアップデートをしたら、苦労して設定したスタイルが無効になったなどなど、トラブルに直面して初めてWordPressが一筋縄でいかないという事に気付く筈です。まさにそこからが中級編の入り口で、中級編以降のカスタマイズには、WordPressの仕組みの一定以上の理解が必要とされるのです。

WordPressでは、一つのページを作るのに様々なディレクトリの様々なファイルを参照し、それらを決められた優先順位で読み込んで表示します。スタイルシートについてもそれは同様ですが、スタイルシートの性質として、同じ要素に対するスタイル指定は後に宣言された方を優先とするという原則と、idやクラスなど具体性のある宣言を優先するという原則があります。ゆえに、特定の要素について最終的に有効になっているスタイルがどのファイルのどこで宣言されたものかが判別できないと、現在のスタイルを変更しようと思っても変更の箇所がわかりません。
要素に実際どういったスタイルが有効になっているのかは、CSSの熟練者にとっては常識ですが、ブラウザの機能を使って調べられます。SafariやChromeなどのWebKit系ブラウザであれば、要素の上で右クリックし”要素の詳細を表示”を選択すると、”webインスペクタ”ウィンドウが現れるので、右側の”一致したCSSルール”という部分に注目します。画像の例ではp要素に適用されたルールが列挙されていますが、line-heightについてはcore.cssというファイルの250行目で宣言されたものの、同じcore.cssの1350行目でより具体的なルールが宣言されたため、効果が打ち消されていることがわかります。

WEBインスペクタ

Firefoxの場合も、右クリック→”要素を調査”で同様の機能を使うことができます。

さて、ブラウザの機能で宣言の位置が特定できたら、その箇所を変更することでスタイルの変更も有効になります。WordPressでは、大抵の場合最終的に有効になっているスタイルは、ルートディレクトリからwp-content→themes→現在使用中のテーマ名のディレクトリ、と階層を下ってその中にある、style.cssというファイルで宣言されています。つまり導入しているテーマに付随したCSSなのですが、このファイルをいじれば、とりあえずスタイルの変更ができることが多いと覚えておいて下さい。

しかしながら、このstyle.cssを直接いじっての変更は非推奨です。というのも、不具合が起きてしまったときにその原因が果たしてテーマ自体の問題なのか、あるいは加えた変更の問題なのか、が判別しづらくなります。また、テーマをアップデートする際にはこのstyle.cssごとアップデートされることになるので、アップデート毎に変更部分がリセットされてしまいます。

そういった問題を回避する方法として、WordPress3.0以降のヴァージョンには子テーマという仕組みが存在します。これにより現在有効になっているテーマを直接変更することなく、任意の部分のみに変更を付け足すことができます。また、ファイルとしては親テーマのパッケージの外部に置く形となるので、親テーマのファイルがアップデートされても影響を受けません。
具体的な設定方法を見ていきましょう。まずは子テーマのディレクトリを用意し、その中にstyle.cssというファイルを作ります。今回はmystiqueテーマの子テーマとしてchildtheme1というテーマを作るとします。style.cssの先頭に最低限以下の記述があれば、子テーマとして機能します。

/*
Theme Name: childtheme1
Template: mystique
*/

CSSのコメント行を使って、まずテーマ名と継承元テーマ名を宣言します。通常のスタイル宣言と違いコロンの左側にスペースは許されないので注意して下さい。またTemplateのラベルに指定する値は、親テーマの名称ではなく、themesディレクトリ下の親テーマのディレクトリ名です。大文字小文字の区別もあるので注意を払って下さい。
ともあれ、これで子テーマとして認識されるようになりました。ダッシュボードの左メニューの”外観”から”テーマ”を選ぶと、この子テーマが通常のテーマと同様選択できるようになっています。子テーマを選択すると、親テーマのファイルはそのままにstyle.cssのみ親テーマのではなく子テーマのものを読み込むようになります。

匿名作子テーマ

先程のstyle.cssに少し肉付けをしましょう。まず、子テーマのstyle.cssではスタイルの記述が行われていないので、このまま読み込むとテーマの表示が滅茶苦茶になってしまうはずです。親テーマのstyle.cssの記述を継承するための記述を行います。

/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css');

@import宣言に親テーマのパスを与えます。注意すべきなのは、子テーマのstyle.cssからの相対パスを与えるということです。
これで親テーマのスタイルを丸ごと読み込みました。さて、先述のCSSのルール、後から宣言した方を優先というものを思い出して下さい。つまり@import宣言の後でスタイルの設定を行えば、既に親テーマのstyle.cssで同じ要素に対する設定がされていても、自動的に子テーマのものが優先されるということです。

/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css');
#none{
display : none;
}

このように書くと、idがnoneの要素が親テーマでどのように設定されていようと表示されなくなります。仕組みがわかれば、あとはつらつらといつも通りのCSS編集ができますね。

以上が子テーマのカスタマイズ（CSS編）です。子テーマではスタイルの変更以外にも、親テーマのもつテンプレートやウィジェットなども置き換え／追加することができます。そちらはPHPの知識が必要となってきますので、いずれ詳しく紹介したいと思います。

このエントリーをはてなブックマークに追加

WordPressテーマMystiqueの実力

1件のフィードバック

WordPress解説の後編で言及したように、WordPressテーマの中には見た目やページ構成の変更のみならず、ウィジェットやプラグイン機能をもパッケージの中に内包する大規模なものがあります。このブログで採用しているMystiqueというテーマもそうした総合的なパッケージであり、一度使い慣れてしまうと他のテーマへ移行するのが億劫になってしまう程機能が多岐にわたります。折角なのでさらりと紹介させていただきましょう。

まずテーマの基本的な情報です。ルーマニアのdigitalnatureというデヴェロッパーによって開発されているこのテーマは、2009年に最初のヴァージョンが出た後、2.x系から3.x系で一度互換性の無いメジャーアップデートをしています。現在はこの2.x系の系譜のlightヴァージョンと、3.x以降のbasicヴァージョンというラインナップを有しており、basicヴァージョンはダッシュボードのテーマ検索でヒットしない為、オフィシャルページからダウンロードして手動でインストールしなければなりません。昔からのユーザでも、未だに3.x系の存在を知らず2.x系のアップデートを待ち続けているという人が結構いるのではないかと思います。
このテーマの初期からの特徴は、見ての通り少しオタクっぽいデザインとjavascriptを利用したインタラクティブなメニューウィジェットです。当ブログのウィジェットエリアにある黒背景のウィジェットは、実はTabbed WidgetというMystiqueテーマ固有のウィジェットです。これがあることにより、ウィジェットエリアに幾つもウィジェットを並べてスペースを消費することを避けられるというわけで、デザイン上の恩恵は多大です。
3.x系では、このTabbed Widgetの設定もドラッグ＆ドロップでするようになり、タブ化できるウィジェットの選択肢が増えた一方で、初心者がその存在に気付きにくくなりました。設定中のスクリーンショットを撮っておきましたので、導入時の参考にしてみて下さい。

Tabbed Widgetその1

まずArbitaryウィジェットエリアに投げ込む


Tabbed Widgetその2

Tabbed Widgetウィジェットの設定項目として登場するので、チェックボックスで有効化

その他、ひととおり他の人気テーマでできることは抑えています。画像をクリックした時のLightBox的挙動、投稿画像のサムネイル化、写真ギャラリー機能、ソーシャルメディア対応、コメントのレーティングなど。また、さすがにメジャーアップデートで前ヴァージョンからの設定引き継ぎができなかった事は問題と認識していたのか、テーマの設定を独自フォーマットでインポート／エクスポートする機能が追加されています。

テーマ設定の吐き出し／読み込み

このような強力な機能を備えたテーマであるが故、ここまで技術力があるならもうWordPress作っちゃえばいいよという感もあるのですが、実は作っているらしいです（笑）。公式ホームページによれば、テーマのアップデート頻度が減少したのはWordPressクローンを作っているからとの事。かつてのWordPressで可能だったように、データベースにMySQL以外を指定できるようにするらしいです。その他、モジュールとプラグインの一本化などなど。
個人プログラマのこのプロジェクトが、将来的にWordPressを淘汰するまでに至ったら面白いですね。Movable Typeとのシェア転換がそうであったように、OSSは一見些細な切っ掛けから勢力図のドラマティックな転換もあり得る筈です。

（2012.6追記：現在一時的にテーマを外しています。）

このエントリーをはてなブックマークに追加

WordPressって何？という人のためのスクリーンショット集（後編）

1件のフィードバック

前編はこちらです。

後編ではブログデザインの変更方法のうち、ダッシュボードの左メニューからアクセスできる初心者向けのものを中心に説明します。ここで紹介する用語とそれぞれの役割の違いを抑えておけば、日常的に触る機会が無くてもWordPressデザインの話題には大体ついていけるようになるに違いありません。

テーマ 〜ブログの構成や見た目トータルのパッケージ

まず一番大掛かりなものから説明します。テーマという用語は他の多くのWEBサービスやオフラインソフトウェアでも使われる事が多く、さらにそれぞれ指示対象が異なっているようなのでややこしいのですが、WordPressの用語として使われる場合ブログの見た目と構成のパッケージを示しています。WordPressインストール直後のシンプルなブログデザインを、写真集風にしたい、とか企業ホームページ風にしたい、など思いついた際、最も手っ取り早いのは無償で（あるいはごくまれに有償で）配布されているWordPressテーマをインストールすることです。テーマのインストールはダッシュボード上で簡単にできるので、スクリーンショットで確認してみましょう。

テーマの管理画面

左メニューの”外観”からサブメニューの”テーマ”を選びます。現在のヴァージョンのWordPressではTwenty Elevenというテーマがデフォルトになっているので、現在のテーマとしてここに表示されています。この画面の下の方に見えるスクリーンショットは、インストールされているが使用中でないテーマを表示しています。

テーマのインストール

”テーマのインストール”タブを選ぶと、WordPress本家に登録されたテーマをキーワードや種別で検索できます。

テーマのダウンロード

テーマインストール成功

今回は試みにAdventure Journalという旅日記風のテーマを入れてみましょう。インストール成功後、デフォルトテーマに設定されている事に注目して下さい。これでブログのアドレスにアクセスすると、ちゃんとテーマの変更が行われています。

テーマ変更後ブログトップ

前回のトップページとは随分見た目が変わりましたね。その一方記事本文などはちゃんと引き継がれているので、テーマの入れ外しの試行錯誤が安心してできます。

ウィジェット　〜ページに表示する単機能の部品

次にウィジェットを説明します。iOSにはウィジェット、Windowsにはガジェットという名前で搭載されている、天気予報などを表示する小さなウィンドウと基本的に同じです。好きなときに追加・取り外しができるのが特徴で、当ブログの右側にある検索窓やタグクラウド、記事リンクなどは全てウィジェットとして追加しています。
ダッシュボードの左メニュー”外観”のサブメニュー”ウィジェット”を選択してみましょう。

ウィジェット追加中

左のスペースに使えるウィジェット一覧があるので、好きなウィジェットを対応する右側のエリアにドラッグ＆ドロップすると追加完了します。ここではPage SidebarというエリアにRSS表示のウィジェットを追加しているところです。2カラムのデザインでしたので、当ブログと同じように記事エリアの右側にウィジェットが追加されていきます。
ページを3カラムにして、左側にウィジェットを登録したい場合はどうなるでしょうか。カラム数などの設定は、テーマが対応していれば”外観”メニューのサブメニュー”Theme Options”から行う事ができます（テーマによってこの項目名は違っていたりしますが、大体このような名前＆位置です）。

カラム数変更中

3カラムに設定したので、ウィジェット設定画面のエリアが、Page Sidebar(Left)、Page Sidebar(Right)という具合に変わっています。追加したいカラムのエリアにウィジェットを投げ込みましょう。

Sidebarエリアが増殖

ちなみにトップページのサイドバーエリアにウィジェットを追加するためには、Blog Sidebarというエリアに投げ込む必要があります。Page Sidebarは個別ページ（当ブログでの例ならaboutページ）にウィジェットを追加するエリアですので、混乱しないよう注意が必要です。

3カラム化確認

Blog Sidebarへの追加が終わり、ちゃんとトップページに反映されました。ウィジェットの説明は大体こんなところです。

プラグイン　〜ブログの機能を拡張する

プラグインという名称も比較的ソフトウェアの世界ではよく使われます。当世のゲームで言えばmodといったところでしょうか。つまりそれが追加される事によって、新たに機能が増えるというパッケージです。ウィジェットとの違いは、ウィジェットがブログに表示する要素であるのに対し、プラグインは必ずしも表示部を持たなくて良いといったところでしょうか。投稿記事中に追加できたりするのも、ウィジェットには無い特徴です。このブログでちょくちょく登場するハイライト付きのソースコードなどは、WP-Syntaxというプラグインを入れて実現しているものだったりします。

プラグインの管理はダッシュボード左メニューの”プラグイン”から行います。サブメニューの”インストール済みプラグイン”でプラグインの使用および停止を切り替えられます。

プラグイン管理

”新規追加”サブメニューから検索して新たに追加する事もできます。

プラグイン検索

プラグインも無料のものが多いので沢山入れたくなりますが、しばしばプラグイン同士の相性問題などで正常に動かなくなったりするので、機能の重複がありそうなものを同時に入れるのは避け、一機能につき一つというように決め打ちをしましょう。

以上の3つの用語は基本ですので、覚えておいて損はありません。ただしこれらが完全に独立したパッケージとして存在しているというわけではなく、テーマを落としてきたらウィジェットが付属していた、あるいはプラグインを入れたらテーマとウィジェットも一緒に付いてきたなどの例もあります。ディレクトリベースでの作業では面倒臭い事になるのですが、ダッシュボード上での見え方はあくまで分類に沿う筈なので、細かい事は気にしないで、そういう事もあると了解して下さい。

このエントリーをはてなブックマークに追加

WordPressって何？という人のためのスクリーンショット集（前編）

1件のフィードバック

ここ10年来のホームページ制作手段の変遷を、わずか十数行で振り返ってみましょう。10年前、安価なADSLの登場でそれまでのテキストサイトなどの軽量コンテンツから、画像主体のページ作りへの移行が行われます。また同時期にCSSの事実上標準としてCSS2.1が提唱されたことにより、フレームやテーブルでのページ構成からCSSでの段組みへと趨勢が移行します。それによってかよらずか、凡百のお手軽なホームページ制作ソフトが淘汰され、Dreamweaverの一人勝ち状態へと市場が移行していきます。なおDreamweaverはFlashと並び2005年にAdobeに買収されるまでのMacromedia社の屋台骨となっていました。
一方ライトユーザ向けホームページ作成環境としては、ブログが次第にその地位を確かなものとしていきます。ブログブームは、さる芸能人ブログが脚光を浴びた2004年頃を始点として良さそうですが、その後アメーバやライブドアといった企業のブログサービスが一般の注目を集め、一方ブログのカスタマイズにまで踏み込むユーザはMovable TypeといったCMSに手を出し始めます。やがてMovable Typeのライセンスの不自由さが広く知られたことなどにより、日本では2007年頃にWordPressとのシェア逆転が起こり、現在ではWordPressがCMSのトップシェアに躍り出ています（データを調べていてびっくりしたのは、CMSの世界シェアで50%を占めるのみならず、全ウェブサイトの中でも16%をWordPressが占めるということです。こちらを参照）。

WordPressがそれまでのブログブームと異なるのは、とにかく日記ページのようなものを作成したいという一般ユーザのニーズに応えるのみならず、企業のフロントページのような採用例も沢山存在するということです。その理由として、WordPressがSEO的に悪くはない（各種プラグインや機能の利用によりSEOのイロハの部分を工数をかけずに対応できる）こと、CMSを使わないサイト制作ではブラウザ間ギャップの吸収という敷居がまだ存在するという現状、企業側、閲覧者側双方の企業ページに対する意識の変化というものが挙げられるのではないかと思われます。
最後に挙げた意識の変化とは、企業ページがブログのようなコンテンツに応じたレイアウト変化を基調とすることに対する、閲覧者側の違和感の払拭と企業側の許容姿勢の出現です。その裏には、それまでの企業ページが紙媒体の延長のようなかっちりとしたレイアウトを求めていたのに対し、現在ではブログのようなアクティブなレイアウトにした方が、閲覧者にコンテンツ更新の期待感を抱かせ易いという優位性の認知があったのではないかと考えられます（こうした意識変化は、企業のトップページに陣取る”ツイートする”ボタンや”いいね！”ボタンに象徴されてると言えましょう。これらは従来の紙媒体の延長のホームページ制作からは出現しません）。

さて、そんなWordPressですが、さすがにトップシェアをひた走るだけあり、ライトユーザからディープなユーザまでの様々なニーズに対応する懐の大きさがあります。実は、唐突にこのエントリでホームページ制作の歴史を語りだしたのは、各々の制作手段の裏にそれを利用したサイト作りでの挫折を味わった多数のユーザがいることを示唆して、それに対してWordPressは程よく簡単なので、挫折組も今一度トライしてみましょうという流れに持っていきたかったのです。
かく言う私自身も、始めは見よう見まねのhtml手打ちサイト（テーブルレイアウト）から始まり、Mozilla SeamonkeyでGUIによるエディットの恩恵を受けるものの、できあがったサイトは不要な<div>、<span>だらけで挫折。本格的にCSSの勉強を始めて組み上げてみるものの、凝った事をやろうとする時の面倒臭さと技術力の欠如により挫折。というように、各パラダイムで挫折していました。そのような私に共通していたのは、とにかくありきたりなサイトでなく、自分好みのカスタマイズを施したサイトを作りたいという欲求でした。
その点WordPressにはカスタマイズの手段がいくつか存在し、それぞれの手段が難易度別にピンからキリまで分かれています。つまり、始めはごく簡単なカスタマイズから手を出して、飽きた段階で一休み。機会を見つけて高度なカスタマイズににチャレンジするというステップでのサイト拡張もできるのです。

能書きばかりになってしまっては仕方が無いので、実際のスクリーンショットで機能を説明していきましょう。導入方法については過去のエントリで説明済みですので、インストールが終わった段階から紹介を始めます。
WordPressをインストールしたディレクトリのアドレスにアクセスすると、既にブログが立ち上がった状態になっています。

インストール直後のWordPressブログ

この状態でトップページのリンクからログインすると、ダッシュボードと呼ばれるブログの管理画面が表示されます。あるいはスクリーンショットにもあるように、トップページのアドレスの後ろにwp-admin/と追加して移動することもできます。

ダッシュボード

ダッシュボード画面の左側の項目で、記事の投稿や各種設定を行います。今回は基本的なブログ更新作業で使う項目を眺めてみましょう。”投稿”メニューをクリックし、サブメニューの”投稿一覧”をクリックすることで、今まで書いた記事の一覧が現れます。

投稿一覧

インストール直後には、サンプル投稿が一件入っています。投稿名の上にポインタを持ってくると、編集やゴミ箱に入れるなどの操作のリンクが現れます。”編集”をクリックすると、次のような編集画面が出ます。

投稿編集画面

Hello World!と書いてある部分が投稿のタイトル、下のフィールドが本文になります。現在は”ビジュアル”というタブが選択されていますが、”html”タブに切り替えると直接タグ打ちで本文の編集ができるため、熟練者が隔靴掻痒でイライラすることもありません。もちろん、ビジュアルエディタに戻して編集内容をすぐに確認することができます。
本文フィールドの上部のボタンは、字体を変えたり箇条書きモードに変更する際などに使います。テキストにリンクを付与する場合は、対象のテキストを選択した状態で鎖のイラストのボタンを押すことで設定ウィンドウが出るようになっています。

また、本文フィールドの左上にある”アップロード/挿入”の隣のアイコンをクリックすることで、画像などを本文中に入れることができます。

メディアの挿入メディアの挿入設定

ご覧の通り、最新版のWordPressではアップロードファイルをドラッグ＆ドロップで追加できるようになっています（html5の恩恵でしょう）。アップロード後のファイルはメディアライブラリに追加されるので、同じウィンドウの”メディアライブラリ”リンクをクリックし、登録された画像をリストから選択、画像のタイトルやサイズ、文章の回り込み設定などを設定したら、”投稿に挿入”ボタンで挿入します。

投稿時には、記事のカテゴリやタグを設定することも可能です。投稿編集画面の右のウィンドウからカテゴリやタグを選んで、チェックボックスで設定します。カテゴリやタグの管理は左の”投稿”メニューのサブメニューから専用の編集画面に行けますので、管理や削除などはそちらで行います。

ブログの記事についたコメントは、左のメニューの”コメント”から管理を行います。インストール時の設定ですと、コメントが承認制になっている筈なので、各コメントについてコメント管理画面から承認を行わないとブログ上に表示されないので注意して下さい。

コメント管理画面

左メニューの”固定ページ”というのは、ブログ記事とは別にページコンテンツを作る場合に使います。このブログであれば、タイトル文字の下にある”about”というリンクが固定ページにあたります。

以上、WordPressの基本的なブログ機能の使い方を説明しました。カスタマイズ手段については、長くなりましたので次回説明することにします。

このエントリーをはてなブックマークに追加

サイトC：000webhostで頻発するwordpressアップデートエラーを回避する

コメントをどうぞ

このサイトで契約しているサーバ000webhostですが、無料であることに加え、MySQLのデータベースを2つ使える、設定パネルとしてcPanelの簡易版が使える、広告が入らない、商用可などのメリットがあり、他と比べてもかなり条件の良いサーバであると個人的に思っています。特にMySQLデータベースが2つまで使えるということは、データベースをまるまる1つ占有してしまうwordpressなどのCMSを気兼ねなく導入できるということで、CMSの実験用として契約するユーザも多数存在するのではないかと予想できます。

一見するとCMSとの相性が良さそうに見えるこのレンタルサーバでは、しかしCMS自体の機能を使ったアップデートやプラグインの導入などの際に、エラーが発生してしまうということが多々あります。加えて、ユーザのアップロードが成功せず何回もトライを続けていると、負荷の低減のためかあるいは不正使用と誤認してなのか判りませんが、当該IPアドレスでのアクセスをしばらく禁止されてしまいます。それにより総合的なユーザエクスペリエンスが最低となり、実験用に契約した場合でも、「このサーバは使えない」という結論に繋がってしまう可能性があります。
そこで、そもそもこういった負の連鎖の原因となるアップロード失敗の原因を突き止め、問題を回避する方法を考えましょう。
結論から言いますと、アップデート時のエラーが頻発するのはサーバ側でPHPプログラムの動作を制限して軽い処理しかできないようにしているためで、000webhostのように.htaccessが使える場合、あるいは他の安サーバでもphp.iniが使える場合、それらの設定を変更することでエラー回避の道が開ける場合もあるというのは知っておいて損のない知識です。具体的に000webhostの場合で見てみましょう。

まずはphpinfo関数でphpの設定を調べて下さい。エラーに関係する項目のみ挙げますが、000webhostの場合デフォルトでmax_execution_timeが10、memory_limitが64M、post_max_sizeが2M、upload_max_filesizeが2Mとなっています。それぞれPHPスクリプトがタイムアウトになるまでの秒数、確保するメモリ容量、POSTで渡せる最大ファイルサイズ、アップロードできる最大ファイルサイズを表しています。
参考までに、サイトAのために契約しているWebhostingPadではこの値が30、128M、8M、2Mになっています。つまり000webhostではこれらの値を厳し目に設定することで、無料ユーザを総合した負荷を抑えるようにしているというわけのようです。
これらの変更を、ユーザのルートディレクトリに置く.htaccessで行いましょう。具体的には、max_execution_timeを少し長めの180秒程度にする、postやuploadのmaxサイズをmemoryリミットの制限内で上げるなどです。.htaccessまたはphp.iniでどのように書けばよいかは、少し前に上げたエントリ（php.ini、.htaccess）を参考にして下さい。あまり詳しく言及すると000webhostの勘気に触れるのではないかという個人的な危惧があります（笑）

少しの欠点がありますが、対処を覚えれば便利なサーバーですね。いちユーザの意見としてポジティブに評価しておきましょう。

（2012.6追記：勝手にページを非公開にされ、コンテンツの返還に有料契約を要求された事件があり、現在このサーバは他人にお薦めしません。少し詳しい経緯などはこちら）

このエントリーをはてなブックマークに追加

サイトC：WordPressをインストール

1件のフィードバック

今回はサイトC（このサイト）にWordPressをインストールするまでの、顛末兼導入ガイドを書きます。MySQLのデータベースは作成してあるという前提（実は今回の事例の場合、契約したサーバRental Orbit SpaceさんがMySQLデータベースは申請を受けて発行という方式をとっていたので、非常に楽でした）かつインストールはウィザードなしで行うという前提で進めます。

まず、何をおいてもWordPressの本体を手に入れなければならないので、日本語版のサイトに行ってダウンロードリンクから落とします。この記事を書いている時点の最新版は2.9.2で、この2.9系のバージョンは日本語文字コードがUTF-8のみに対応しているようです。一方Shift-JISやEUC-JPを使用する際には、過去にリリースされた2.0.x系を利用します。ただし古い系統はメンテナンス期間も終了したようなので、WordPressを使うのならUTF-8環境にする必要があるくらいに捉えておいたほうが良いと思います。

さてローカル環境でファイルを解凍したら、wp-config-sample.phpという名前のファイルを探し、エディタで開きます。このとき、ファイルの中にも書いてありますがメモ帳などのアプリケーションでなく、文字コードを指定して保存できるエディタを使ってください。22行目付近からがMySQLの設定になりますので、あらかじめ用意しておいたMySQLデータベースのデータベース名、ユーザ名、パスワード、ホスト名（web上に公開するならば、契約したサーバのホストネームを入れます。そうでなくローカル環境で使用するなら変更しなくてOKです）をそれぞれputyourdbnamehere、usernamehere、yourpasswordhere、localhostの代わりに入れます。このファイルはwp-config.phpという名前を付けて、選択肢にあればUTF-8N、なければエディタの設定でBOMなしにした上でUTF-8で保存してください（このBOMというのは、UTF-8のファイルの頭につくちょっとした情報ですが、ここでは必要ありません）。

さてこうしてwp-config.phpが加わったフォルダを、ドキュメントルート以下にアップロードします。ブラウザでそのフォルダまでのパスを指定しアクセスすると動きます。以上でインストールの完了です。

このようなインストール手順を、サイトCについては5分程で行えました。以降トラブルもなく動いているので、導入が非常に簡単なCMSであるという印象を個人的に持っています。また、インストール後の画面でどこから手を付けてよいのかが比較的判り易く、はじめてCMSを使う人にもお勧めできるアプリケーションだと思います。

サイトCの制作では、主にWordPress標準のインストール機能で追加ファイルを落としてきて、管理画面上から見た目などを変更するという方法を使います。次回以降はその過程を報告していこうと思います。

このエントリーをはてなブックマークに追加