30分で出来る！WordPress簡単カスタマイズ方法 Part.2（全5回）～基本設定 / 問合せフォーム作成編～

みなさん、えんじには！！
さくらインターネットの元秘書です。

では、本日は
「30分で出来る！WordPress簡単カスタマイズ方法 Part.1」に続きまして
これからWordPressをはじめてみようかな とお考えの方に向けて
引き続きWordPressの簡単カスタマイズ方法をご案内したいと思います。

繰り返しとなりますが、
サンプルサイトとして、"さくナレ” 美人秘書直伝シリーズのテストをご用意していますので、
具体的な動作や画面イメージは上記Webサイトでご確認くださいね。
※ ”さくナレ”の記事作成のための、個人的なテストサイトでもありますので、突然に予告なく
　デザインやコンテンツをガラッと変更したりしますが、悪しからずご容赦くださいませ

STEP5　基本の設定をしよう！

さて、前置きが長くなりましたが本題に移りたいと思います。

先日でWordPressの整理と準備が完了したので、今日は基本の設定から行いましょう！！
まずは、サイトのタイトルや説明文、時間の表示形式などお好みに設定します。

1. WordPressに管理者権限でログインします。




2. WordPressの管理画面 左側のメインメニューの「設定＞一般」をクリックします。




3. 一般設定画面にて、各項目を適宜編集し「変更を保存」ボタンを押下します。

STEP6　パーマリンクを設定しよう！

では次に、個々の記事毎に割り当てられるURL（パーマリンク）を設定しましょう。

デフォルトの設定でも、問題なく利用することができますが、
私の場合は（好みの問題ですが）、たいていの場合は以下のように設定しています。

1. WordPressの管理画面 左側のメインメニューの「設定＞パーマリンク設定」をクリックします。




2. 「カスタム構造」のラジオボタンをクリックし、「/%category%/%postname%」と入力し、「変更を保存」ボタンを押下します。

他にも以下のようなパーマリンクの構成タグがございますので、お好みで使い分けて下さいね。

構成タグ	内容
%year%	投稿年
%monthnum%	投稿月	%day%	投稿日	%hour%	投稿時	%minute%	投稿分	%second%	投稿秒	%postname%	投稿タイトル	%post_id%	投稿固有のID番号	%category%	カテゴリー名	%tag%	タグ名	%author%	著者名

STEP7　背景を設定しよう！

それでは、最初に考えたサイト目的やデザインにあわせて、お好みの背景を設定しましょう。

1. WordPressの管理画面 左側のメインメニューの「外観＞背景」をクリックします。




2. この画面では、お好きな画像をアップロードして背景に設定したり、お好みの色を背景色に指定することができます。今回は、「シンプルで可愛いキレイめのカジュアル」を目指したいと思いますので、（私の好みで）背景には別途作成した格子柄の画像を利用したいと思います。それでは、「ファイルを選択」し「アップロード」ボタンを押下します。




3. 背景が更新されました。画像を利用した場合には、画像の位置・繰り返しやスクロールの有無も細かく設定できますので、お好みで表示方法を選択くださいー。

STEP8　ヘッダー画像をアップロードしよう！

次に、最初に考えたサイト目的やデザインと背景色にあわせて
お好みのヘッダー画像を設定しましょう。

1. WordPressの管理画面 左側のメインメニューの「外観＞ヘッダー」をクリックします。




2. 「ファイルを選択」ボタンを押下し画像ファイルを選択のうえ、「アップロード」ボタンを押下して、ヘッダー画像をアップロードします。




3. 必要に応じてヘッダー画像をトリミングし、「切り取って公開する」（または「トリミングせず、このまま画像を公開する」）ボタンを押下します。




4. ヘッダー画像が更新されました。

STEP9　固定ページに問い合わせフォームを作成しよう！

話が変わりますが
WordPressのページを作成する方法は大きくわけて、「固定ページ」と「投稿」の2つがあります。

「固定ページ」は”お問い合わせ”など単体のページに利用し、
「投稿」は、記事を書くたびにページが増えていくの内容（たとえば日記など）に使用します。

それでは、早速固定ページにお問い合わせフォームを作成してみましょう。

1. 左側のメインメニューの「プラグイン＞新規追加」をクリックします。




2. 検索窓に「Contact Form 7」と入力し、「プラグインの検索」ボタンを押下します。




3. Contact Form 7の「いますぐインストール」をクリックします。（必要に応じて、説明もご参照くださいね。）




4. インストールが完了したら、「プラグインを有効化」をクリックします。




5. Contact Form 7の「設定」をクリックします。




6. コンタクトフォーム 1の「編集」をクリックします。




7. タイトル・フォーム・メール・メッセージを適宜変更のうえ、「保存」ボタンを押下し、下記赤枠内のコードをコピーします。
   • メールアドレスさえ更新すればデフォルトのままでも利用することができますが、今回はちょっこっと工夫してデフォルトフォームに透かし文字を入れています。フォームのソースを確認されたい方は下記の画像をクリックして拡大表示ください。実際の動作を確認されたい方は"さくナレ” 美人秘書直伝シリーズのテストをご覧下さいね。
   • もっと詳しいContact Form 7の使い方は、公式サイト：Contact Form 7 使い方をご参照下さいませ。

   




8. 左側のメインメニューの「固定ページ＞固定ページ一覧」をクリックします。




9. 既存の「サンプルページ」の「編集」を押下します。




10. 記事のタイトルやテキストタブの文章を適宜編集のうえ、7でコピーしたコードを書き加えて、「更新」ボタンを押下します。




11. お問い合わせフォームが完成しました。

最初のイメージにだんだんと近づいてきましたね！
・・・ということで、「30分で出来る！WordPress簡単カスタマイズ方法 Part.2」
本日はここまでです。

それでは、本日も最後まで御覧くださいまして、ありがとうございました！
See you next time (´∀｀*)!

参考：WORDPRESS Codex 日本語版

特集：30分で出来る！シリーズ（全5回）

WordPress簡単カスタマイズ方法 Part.1 ～整理と準備編～
WordPress簡単カスタマイズ方法 Part.2 ～基本設定 / 問合せフォーム作成編～
WordPress簡単カスタマイズ方法 Part.3 ～カテゴリー登録 / メニューバー設定 / 記事投稿編～
WordPress簡単カスタマイズ方法 Part.4 ～ウィジェット整理 / アクセスカウンター設置編～
WordPress簡単カスタマイズ方法 Part.5 ～RSS表示 / バナー設置編～

おしらせ