WordPressメールフォームプラグイン Contact Form 7

今やWebサイトでは直接メールを送信できるお問い合わせフォームは必須です。 WordPress(ワードプレス)をブログで使用するにしてもホームページとして使用するにしても 矢張り利用者に書き込んで貰って送信すれば運営者にメールが届くメールフォームは必要でしょう。 WordPress ではプラグインを利用することでメールフォームの装備が可能になっています。 メールフォーム用プラグインも数有るようですが、 今回は定番の Contact Form 7 を使ってみることにしました。 作者が日本の方で 使い方のページも日本語で用意 されています。

例に拠ってインストールは プラグイン >> 新規追加 >> 「Contact Form 7」で検索 すれば一番上に表示されますのでインストールをクリックして有効化するだけです。( WordPress(ワードプレス)の携帯&スマートフォン対応 :2011年6月18日記事参照)

インストールが済んだら先ずは左メニューに お問い合わせ と言う項目が加わる筈ですからクリックして 編集画面 に進みましょう。 ここには既に コンタクトフォーム 1 と名付けられたテンプレートが用意されています。 また茶色の地色に白で

[contact-form 1 "コンタクトフォーム 1"]
なる文字列が用意されています。 この文字列をコピーしてメールフォームを表示したいページの表示したい部分に貼り付けます。 これだけでページを確認した時には其処にメールフォームが出現します。

初期設定のテンプレートをカスタマイズなしに使用しても

  1. お名前 (必須)
  2. メールアドレス (必須)
  3. 題名
  4. メッセージ本文
  5. 送信ボタン
が自動的に表示され、WordPressの管理者のメールアドレスと 書き込んだ方のメールアドレス(上の2番)にメールが届きます。 普通に使う分にはこれで充分ですね。

※ なお、ここで動作確認している WordPress のバージョンは 2011年6月時点の 3.1 です。 2011年7月時点では最新版の3.2 がリリースされています

WordPressのパーマリンク(固定リンク)の設定

WordPress(ワードプレス)のもともとの設定では 各ページのインターネットアドレス(URL)が記事のID番号を指定する仕様になっていて、 ホームページとして利用する際ばかりでなくブログで利用するにしても少し違和感があります。 番号で振られていますのでどちらかというと固定的なURLであるに関わらず、 流動的なものであるような印象も与えるでしょう。 また検索エンジン対策としても投稿した記事のタイトルをURLに含めた方が 良い結果が得られることが多いと言われています。

この設定を変更するにはダッシュボードの左メニューの 設定 >> パーマリンク設定 と進みます。 表示された パーマリンク設定 画面では確かに選択されているその表現は ?p=【数字】 と言う様なドメイン名に対し ページID を引き渡す形になっています。 選択肢はその標準設定以外には以下、

  1. 日付と投稿名
  2. 月と投稿名
  3. 数字ベース
  4. カスタム構造
の四種類がありますので、 好みのものを此処で選べば良い訳ですね。

最後の カスタム構造 のみ、やや特殊で自由度の高い分、自分で構造を組み立てなければいけません。 カスタム構造以外の三つを選択した際、 自動で適切な文字列が入力エリアに表示されるので、 カスタム構造ではそれを参考に文字列を組み立てると良いのですが、 あまり自信がない向きは避けた方が賢明かも知れません。

WordPressのパーマリンク(固定リンク)の設定画面上の項目

WordPressスマートフォン対応プラグインに問題発生

WordPressスマートフォン対応プラグインに問題発生:Password Reset 今日2011年7月23日のITメディアエンタープライズのネットニュースとして WordPressのプラグインに悪質なコードが混入 が流れました。 この問題を抱えているプラグインの一つに 本ブログ2011年6月18日の記事 WordPress(ワードプレス)の携帯&スマートフォン対応 で紹介した WPTouch が含まれてしまっています。

WordPress.orgの公式見解としての Matt Mullenweg氏の手になる WordPress.org 公式ブログの記事が JOTAKI Taisuke氏により以下、 パスワードリセット(2011年6月22日) として和訳されています。 これを参考に、問題を抱えていると思われるならば

  1. プラグインを最新にする
  2. パスワードを変更する
  3. ワードプレスを再インストールする
  4. 或いは最悪ではOSの再インストールをする
などの手を打つ必要が生じて来ます。 孰れにせよ、バックドアを仕掛けられたとなると深刻な問題ですので、 事態の進展を見守るに越したことはありません。

ホームページとしてWordPressを使う時のトップ頁変更(簡易版)

専門的知識がなくても更新の可能なホームページ(CMS)としても使えるという WordPress(ワードプレス)ですが、本来ブログシステムとして機能する為に、 トップページがブログブログしてしまう (新規投稿順に投稿が繰り返し表示されてしまう) のは致し方ない処です。 その問題の解決法として提示したのが2011年6月21日 ホームページとしてWordPressを使うときのトップ頁の変更 でした。 しかしこの方法の実践には FTP というソフトウェアを使って WordPressのインストールされたサーバーとやり取りしなければいけませんでした。

記事内にも記したように トップページだけ別デザインにすると言う様な要請がなければ FTPソフトを使わなくても WordPress上で作成した固定ページをトップページに指定する方法があります。 WordPressのダッシュボードのメニューに於いて、 設定 >> 表示設定 と進みます。 すると画面の一番上に フロントページの表示 と言う設定項目があります。 (下図参照) WordPress設定>表示設定>フロントページの表示 この設定が最初は 最新の投稿 が選択されていると思います。 ここで 固定ページ を選択すると フロントページ の設定が出来るようになります。 プルダウンメニューを開くと既に作成した個別ページが表示されると思いますので、 トップページにしたいページを選択します。 これで画面一番下の 変更を保存 ボタンをクリックして設定を保存し、 実際にトップページを確認すれば設定した個別ページが表示されている筈です。

WordPressのメニューに全ての個別ページが表示されてしまう時

WordPress(ワードプレス)のバージョン3では以前のバージョンに比べ、 メニューのカスタマイズが管理画面から出来る様に機能強化されました。 複数のカスタムメニューが作成出来、 それをお好みのウィジェット(ホームページの構成部品の一つ)内等に配置出来ます。 しかしこの様に便利になった分、問題を招くことも有る様です。 それが本記事タイトルにもしました、 作成した個別ページが全て WordPressで作成したホームページの メインのナビゲーションメニューに反映してしまうというものです。 作成した個別ページが全てメニューに表示されては ページ数が増やすことも難しくなってしまいます。

WordPressで作成したホームページのメニューとして設定する方法 実はこれは作成したカスタムメニューが WordPressで作成したホームページのメニューとして設定されていないことに拠ります。 カスタムメニューは 概観 >> メニュー で表示される画面の右の (+) タブ付き設定項目でタブをクリックすることで複数作成可能です。 またこれら複数のカスタムメニューには名前をつけられ、 つけた名前が上部のタブに表示されます。

同画面上でカスタムメニュー設定項目の左隣に テーマの場所 という設定項目があります。 (上図参照) 中に メインナビゲーション としてプルダウンメニューが用意され、 これをプルダウンすると右隣で作成したカスタムメニューが全て表示されるでしょう。 この時カスタムメニューが設定されていないと いくらカスタムメニューを弄ってみてもそれはホームページのメニューには反映されず、 本記事タイトルの通りの問題が発生することになります。 従って此処で任意のカスタムメニューを選択した後、 保存すればWordPressで作成したホームページのメインナビゲーションには、 想定通りのメニュー項目が表示される筈です。

※ なお、ここで言及している WordPress のバージョンは 2011年6月時点の最新版の 3.1 です。

ホームページとしてWordPressを使うときのトップ頁の変更

ブログとして通用しているWordPress(ワードプレス)ですが、 本ブログの関連記事でも折に触れて言及しているように CMS(更新が簡単に出来るホームページ)としても利用可能です。 ブログの様に投稿する度にトップ頁が変わってしまうと 通常、ホームページとして適当ではありません。 そこで標準だとトップ頁には新規投稿が表示されるブログタイプであるものを、 固定のホームページタイプに変更する必要が生じます。

ホームページとしてWordPressを使うときイメージ WordPress ではバージョンの3からデザイン・レイアウトの基本となる Twenty Ten(トゥエンティテン:2010) というテンプレートが用意されています。 このテンプレートファイル群の中で WordPressのトップ頁に適用されているのが、 index.php であり、この中でブログタイプの投稿繰り返しの処理が指定されています。 但しこのファイルの中身を書き換える必要はありません。

WordPressではトップ頁として home.php がない時に限って index.php がトップ頁に適用される様に決められています。 また Twenty Tenテンプレートには home.php は用意されていません。 其処で index.php を複製し home.php と改名してしまいます。 これで home.php がトップ頁として読み込まれるようになります。

あとは home.php の中身を望みのHTMLに書き換えるだけです。 書き換えるのは

<div id="content" role="main">
から
</div><!-- #content -->
の間で通常は問題ないと思います。 但し、この書き換えに留まるならば他にもトップ頁を置き換える手段はある為、 home.php ファイルを用意する旨みはなくなってしまうかも知れません。 下階層とは大幅に異なるトップ特有のデザイン・レイアウトを 採用したい時に有効な手法となります。 下階層と同様のレイアウトデザインを採用するならば、 もっと簡単に実践出来る他の方法が好いでしょう。

追記:
本記事で 他の方法 と標記した内容の記事を2011年6月23日に ホームページとしてWordPressを使う時のトップ頁変更(簡易版) として本ブログに掲載しました。

※ なお、ここで言及している WordPress のバージョンは 2011年6月時点の最新版の 3.1 です。

WordPress(ワードプレス)の携帯&スマートフォン対応

本記事タイトルの結論から先に言ってしまえばプラグインを利用します。 WordPress(ワードプレス)では後から様々な付加機能をプラグインとして追加することが出来ます。 ブログシステムであると共にCMSとしても利用できる WordPress(ワードプレス)は全世界に於けるユーザーが大変多い為に 周辺環境も充実していてこの様なプラグインも数が揃っているのです。

WordPressで作ったサイトを携帯電話で見るのに適した様に 画面を変換してくれるプラグインが Ktai Style (携帯対応プラグイン) です。 WordPress(ワードプレス)ktai-styleインストール画面 WordPressダッシュボードで プラグイン 管理画面に進み、タイトル表示の右横の 新規追加 ボタンを押して進む プラグインのインストール ページに於いて ktai と入力し検索すれば検索結果の一番上に表示されるでしょう。 ここで いますぐインストール をクリックすればインストールが開始されます。 インストールが上手くいき遷移したインストールの完了画面で プラグインを有効化 をクリックすれば作業はこれで終わりです。 出来ればプラグインインストールのビフォー画面を確認してから、 アフター画面を確認すれば分かり易いと思います。

スマートフォン対応も上記の携帯対応と全く同じで 検索する時の文字を WPtouch と変えるだけです。 これはスマートフォン対応のプラグインとして高評価の WPtouch の利用になります。

本体のシステムに後から好みの機能を追加出来て、 それらの種類が充実している、 と言うのも WordPress の評価を上げる好い循環の一因となっているのでしょうね。

※ なお、ここで言及している WordPress のバージョンは 2011年6月時点の最新版の 3.1 です。

WordPress(ワードプレス)での背景画像変更

いよいよ WordPress(ワードプレス)によるホームページの開始 されたとしましょう。 何も施さなくてもこのまま運用出来るのが WordPress の好い処です。 でもブログとして運用するにせよ、 ホームページとして運用するにせよ、 自分のものとして運用する時にはやはり オリジナリティが欲しくなるのが人情と言うもの、 手始めに背景から変更するのは如何でしょう?

通常ホームページの背景を変更するにはHTMLとCSSと言う専門用語を覚え、 FTPと言うソフトを使ってインターネットに接続しなければいけませんでした。 WordPress では管理画面(ダッシュボードと呼びました)から 背景画像を変更出来ますから、この点敷居がグッと低くなったことになります。

WordPressダッシュボード左欄メニュー「概観>背景」ボタン 背景画像を変更する為のページはダッシュボート左メニューの 概観 >> 背景 に用意されておりクリックすると カスタム背景 と称す該当ページが開きます。 このページで 背景画像 >> 画像をアップロード なる項目を辿るとその右に 自分のコンピューターから画像を選択 項目が用意されその下には 参照 ボタン若しくは、 ファイルを選択 ボタンが見えると思います。 後者ではここではまだファイルが選択されていませんので右には 選択されていません と表示されているものと思います。 ここで手元のパソコンなりからファイルを参照の上選択します。 すると前者ではパソコンの中のファイルの位置が、 後者ではそのファイル名が表示されますので、 更に右に位置する アップロード ボタンをクリックしましょう。 上手く行けば上のプレビュー画面に今アップロードした画像が表示されているでしょう。 これで既に背景画像が設定されている筈です。 この時だけ表示される確認を促すリンクか、 若しくは左上のタイトルをクリックすれば設定が反映されているか確認出来ます。

同設定画面ではカスタムの背景画像が設定されると同時に、 その属性も編集出来るようになります。 即ち のみだった 表示オプション

  1. 場所
    背景の位置を左、中央、右から選択できる。
  2. 繰り返し
    背景の繰り返しを繰り返しなし 、タイル、水平方向に繰り返し、垂直方向に繰り返しから選択できる。
  3. スクロールの有無
    背景スクロールをスクロールと固定のどちらかから選択できる。
が加えて編集可能な様に表示されます。 流石に基本的な部分は網羅されている感じです。

但し、話しは少し専門的になりますが敷居の低くなった分問題も有ります。 テンプレートやブログシステムとの整合性を取るためだと思われますが、 この 背景設定変更事の反映のCSSはHTMLのHEADタグ内にSTYLEタグとして直接書き出される ことになります。 出来得ればCSS設定が各所に散らばることは運用の効率化を考え避けたい処ですが、 そこは少し専門的な部分にもなりますので、 一般の方が運用するには(気にする部分でもなく)問題はない部分でもあるのでしょうね。 そう考えればWordPress開発陣の判断としては妥当であるとも思う老婆心でした。

※ なお、ここで言及している WordPress のバージョンは 2011年6月時点の最新版の 3.1 です。

WordPress(ワードプレス)によるホームページの開始

独力にせよ、専門家の力を借りるにせよ 二つのWordPress(ワードプレス) のどちらかでもインターネット上のサーバーに用意が出来れば、 それはもう貴方のホームページが始まっていると言うことです。 ブログとして有名な WordPress はホームページとしても利用出来、 ホームページとして利用する形式を CMS というのでした。 既に始まっているホームページ、 ここからはCMSとしての機能をフル活用して ホームページを更新していくことが出来ます。 (独力で用意する場合用の記事がバージョンは少し古くなりますが、姉妹ブログ ホームページ作成浜松Tips の2009年8月25日の記事 WordPress2.8を導入する にまとめてあります。)

WordPressをブログとして利用するにしても CMSとして利用するにしてもその拠点とも言えるページがあります。 管理者用のページがそれで WordPress では ダッシュボード と呼んでいて、それは大抵の場合

http://www.hoge.jp/wp-admin/
からアクセス出来ます。

WordPressダッシュボード左欄メニュー設定ボタン 独力で用意した時には急いでいた為かも知れず、 専門家の頼んだ時にはまだ決まっていなかったかも知れず、 仮題となっているでしょう、先ずはホームページのタイトルを変えてみましょう。 それにはダッシュボードの左欄のメニューの 設定 をクリックします。 すると設定項目の中でも一番上に位置する 一般設定 項目が自動的に選択され該当ページが開きます。 このページの一番上の設定項目 サイトのタイトル を変更し、ページの一番下に位置する 変更を保存 ボタンをクリックすることで設定が反映される筈です。

設定が反映されているか確認するには同じページの左上を見ます。 左上にはサイトのタイトルが表示され、 今貴方が設定し保存したタイトルに変更されているでしょう。 このタイトルはクリック出来、 クリックすれば実際の貴方のホームページが見られます。 ここのタイトルも設定通りに表示されている筈です。 これで貴方のホームページは開始されました!

※ なお、ここで言及している WordPress のバージョンは 2011年6月時点の最新版の 3.1 です。

二つのWordPress(ワードプレス)

WORDPRESSロゴ 近頃ではホームページを作成するのに CMS という専門家でなくても更新のし易いシステムを利用するケースが増えてきています。 このシステムとして評価が高いのが WordPress(ワードプレス) で、本ブログ2011年6月6日 WordPress(ワードプレス)とは の記事にもしました。 この WordPress の利用法、接点としては二種類あります。

WordPress ソフトウェアですから Windows のソフトウェアと同じ様に、 インターネット上のサーバーにインストールして使います。 その為にソフトウェアをダウンロードさせてくれる公式サイト WORDPRESS.ORG日本語 があります。 同サイトでは使い方や、困ったことやその解決法などが掲載されているフォーラムへの リンクがはられていたりしますが、 矢張りパッケージをダウンロードしてインターネット上のサーバーに インストールから自分で始めるというのは敷居が高いことは否めません。 主に自分でサーバーを管理出来る専門家の選択する種類の WordPress と言うことになります。

もう一つがぐっと敷居が下がって、 ITに不慣れな方でも比較的利用しやすくなる形態で、 既にサーバーには WordPress がインストールされて用意されています。 其の為アカウントを作れば直ぐに利用を開始出来ます。 其の為に用意されているサイトが WORDPRESS.COM日本語 です。 こちらの種類ではサーバーの用意から自分で始めるのと、 はまぞうの様な既に総て用意されているブログシステムとの、 中間に位置づけられるのではないでしょうか。

上で紹介するのは全世界に展開する WordPress を日本に於いてサポートしてくれているWebサイトです。 ご本家は英語のサイトになります。 其方の公式サイトでははロゴについてのページ Logos and Graphics も用意されていて使用上の注意点も記されています。 本記事にもこのページに用意されている WordPress のロゴマークを右上にあしらってみました。