Jetpackでお問い合わせフォームを作る

WordPressでは標準でお問い合わせフォームが付いていないので、「プラグイン」というオプション機能を入れます。

WordPressはこのプラグインが非常に豊富で、自分が付けたい機能を必要なだけ付けることができるのですが、種類が多すぎてどれを入れたら良いか分からないという人も多いと思います。

そこで、今回は「Jetpack」というプラグインを入れます。
Jetpackとは名前の通り、ホームページの運営に必要な「サイトの解析」や「セキュリティの保護」など40種類近くのたくさんの機能がパックされたものです。

これ1つあれば、基本的なホームページの制作はできるのですが、他にもいろいろ入れたいプラグインがある場合は動作が重くなることがあるので、他のプラグインをおすすめします。
いろいろ入れるの面倒くさい、という場合に良いです。

Jetpackをインストール

まずはお問い合わせフォームを作ります。

管理画面の「プラグイン」→「新規追加」を選択し、検索キーワードから「Jetpack」を入力し、「今すぐインストール」をクリックします。

jetpack01

 

インストールしたら、「有効化」をクリック。

jecpack02

 

Jetpackのプラグインの画面が出てくるので、「WordPress.comと連携」をクリック。

jetpack03

 

いきなり英語の画面が出てきますが、気にしないでください。
WordPressのサービスとの連携が必要になるので、
1.メールアドレスを入力
2.好きなユーザー名を入力
3.好きなパスワードを入力
4.サインアップをクリック

jetpack04

 

確認画面が表示されますので、「Approve」をクリック。

jetpack05

 

次にプランを選択しますが、一番左側の無料プラン「Select Free」をクリック。

jetpack06

ここまででJetpackの準備はOKです。

お問い合わせフォームを設置

それでは、お問い合わせフォームを作っていきます。
まずはお問い合わせ用のページを作ります。

管理画面の「固定ページ」から「新規追加」をクリック。

1.タイトルを入力
2.アドレスを英数字で入力
3.お問い合わせフォームの上に表示する文言を書きます。
4.「お問い合わせフォームを追加」をクリック

form01

 

「お問い合わせフォームの情報」で、
1.お問い合わせがあったときの件名と
2.自分のメールアドレスを入力。
form02

 

「お問い合わせフォームのフィールド」で、お問い合わせフォームに必要な項目を増やしたり、減らしたりできます。
1.増やすときは「フィールドを追加」をクリックして必要項目を追加します。
減らすときは、「×」ペケボタンをクリック。

各項目はマウスでドラッグして上下を入れ替えられます。

2.編集が終わったら、「フォームを更新」をクリック。

固定ページにいま追加したフォームが入力されているので、ページの「公開」をクリックします。

form3

これでお問い合わせフォームができました。
きちんとフォームが動いているか、試してみてください。

自動返信メール機能は付いていないので、どうしても必要な場合はContactForm7などの他のプラグインをお使いください。

2017年9月26日 5:02 PM カテゴリー:WordPress講座


Twenty Seventeen(無料テーマ)でホームページを作る

WordPressは「テーマ」と呼ばれるテンプレートでデザインを変更することができます。

無料のものから有料のものまでありますが、今回はWordPressの公式テーマ「Twenty Seventeen」というデフォルトのテーマを例に作成していきますので、特に設定の必要はありません。

WordPressには他にもいろいろなテーマがあります。テーマごとに独自の機能がありますので、自分が作りたいものに合ったものと、なるべく配布元が安全なところかどうか確認してから選びましょう。

管理画面から編集を行いますので、まずはログインして表示します。

 

固定ページの作成

固定ページは、「店舗情報」や「会社概要」といったブログのように頻繁に更新しない、常に見せたい情報を載せるページのことです。自分の必要なページを追加していきましょう。

(1)「固定ページ」→「新規追加」をクリック
(2)ページのタイトルを入力
(3)パーマリンク(アドレス)が日本語なので、「profile」など英数字に変える
(4)本文を入力
(5)公開ボタンをクリック

sevev01

文章だけだと味気ないので、見出しや左上の「メディアを追加」から適度に画像を入れると見やすいです。
画像を横に並べて表示したい時は、「ギャラリーを作成」で画像を選択しましょう。

投稿ページを作成

投稿ページには、ブログ記事を書いていきます。

(1)「投稿」→「新規追加」をクリック
(2)ブログ記事のタイトルを入力します
(3)パーマリンク(アドレス)が日本語なので、英数字に変えます
(4)記事の本文を入力します
(5)カテゴリーを分けたい時は「新規カテゴリーを追加」で追加します
(6)アイキャッチ画像を選択すると、ブログ記事を目立たせることができます
(7)「公開」ボタンをクリック

seven02

本文は見出しを入れる、画像を入れるなどして単調にならないようにメリハリを付けて書いていきましょう。

メニューの作成

(1)「外観」→「メニュー」で新しいメニューを作ります。
(2)「メニュー名」に適当なメニューの名前を入力
(3)「メニューを作成」をクリック

seventeen03

 

(1)先ほど作った固定ページにチェックを入れます
(2)「メニューに追加」ボタンをクリック

seventeen04

 

メニューの順番は、マウスでドラッグして入れ替えられます。
「トップメニュー」にチェックを入れて、「メニューを保存」を押します。

seventeen05

これで、各ページにメニューが表示されます。

 

ヘッダー画像を変更する

トップページ上部の大きな画像を変更します。
「外観」→「カスタマイズ」から「ヘッダーメディア」を選択。
トップに表示させたい画像を選択して、入れ替えます。
seven08

seven09

ヘッダー画像が入れ替わります

seven13

 

サイドバーを作成する

各ページの横に常に表示される情報です。
「外観」→「ウィジェット」から表示させたい情報を右側の「ブログサイドバー」にドラッグして移します。
「フッター1」と「フッター2」には、下部に表示させたい情報があればドラッグしましょう。

seventeen06

トップページに紹介文を表示させる

トップページのブログの上に、常に表示させたいお店の紹介文などを設定します。
「外観」→「カスタマイズ」から「固定フロントページ」をクリック。
seven10

 

固定ページで作った「トップ」のページを表示させます
(1)固定ページをクリック
(2)フロントページ表示の時は「トップ」ページを選択
(3)ブログ投稿ページの表示の時は「ブログ」を選択

seven11

次に、「外観」→「カスタマイズ」から「テーマオプション」をクリック。
seven07

 

先ほど、トップに表示させるページで「固定ページ」を選択したので、ブログが表示されていない状態になっています。
「フロントページ第1セクションのコンテンツ」→「ブログ」を選択して、「保存して公開」をクリック
トップページの下にブログを表示させましょう。

 

ここまででホームページの大まかな部分はできあがりです。
seven14

次は、お問い合わせフォームやオプション機能を付けていきます。

2017年7月21日 4:54 PM カテゴリー:WordPress講座


WordPressの初期設定をする

ワードプレスの初期設定

WordPressをインストールできたら、初期設定をしましょう

まずは管理画面にログインして、左メニュー「設定」→「一般」を開きます。

ワードプレスの初期設定1

 

(1)「サイトのタイトル」変更する場合は、書き換えます
(2)「キャッチフレーズ」ホームページの説明文を入力します。

ワードプレスの初期設定2

 

入力したら、画面下側の「変更を保存」を押します。

ワードプレスの初期設定3

 

左上のタイトルにカーソルを合わせて「サイトを表示」を押すと、サンプルのタイトルが書き変わっています。

 

ワードプレスの初期設定4

ワードプレスの初期設定5

 

各ページのアドレスの見え方を設定

ブログ記事やページを作成したときの、アドレス表示の仕方を設定します。
この設定は必ず記事を書く前に行います。途中からアドレスを変えてしまうと、リンク切れなどが発生してしまい、せっかくのSEO対策もリセットされてしまいます。

管理画面の「設定」→「パーマリンク設定」をクリック

ワードプレスの初期設定6

 

共通設定で「投稿名」を選択
「変更を保存」ボタンを押します。

ワードプレスの初期設定7

 

※パーマリンク設定の項目選択のメリットデメリットはいろいろありますが、ここではSEOと各記事の管理のしやすさを優先して「投稿名」にしています。

 

コメントの投稿をオフにする(任意)

WordPressの各記事にコメントを受け付ける機能があるのですが、中にはスパムコメントなど迷惑なを投稿される場合が多いので、必要がなければ無効にしておきましょう。

「設定」→「ディスカッション」をクリック。

ワードプレスの初期設定9

 

「投稿のデフォルト設定」に付いているチェックを全て外して、「変更を保存」を押します。

ワードプレスの初期設定10

 

これで、設定は完了です。

2017年6月29日 4:04 PM カテゴリー:WordPress講座


WordPressをサーバーにインストールする(ロリポップ!)

ワードプレスをインストールする

まずは、ロリポップ!の管理画面にログインします。

(1)サーバー申し込み時の「アカウント」を入力
(2)「ドメイン」を選択
(3)パスワードを入力
「ログイン」をクリック。

ロリポップの管理画面からログイン

 

ロリポップ!の管理画面の左側、「簡単インストール」にマウスを合わせ、「WordPress」をクリックします。

ワードプレスインストール1

 

WordPressの「利用する」をクリック。

ワードプレスインストール2

 

必要事項を入力していきます。
(1)インストール先URLは何も入力しないでOK。
(2)WordPerssホームページのタイトルになります。後からでも変えれます。
(3)管理画面ログイン時のユーザー名です。半角英数字で入力。
(4)管理画面ログイン時のパスワードです。なるべく自分が覚えやすいものを入力。
(5)再度パスワードを入力。

「入力内容確認」ボタンを押します。

ワードプレスインストール3

 

「承諾する」にチェックを入れて「インストール」を押します。

ワードプレスインストール4

 

以上でインストールは完了です。

WordPressの管理画面にログインする

(1)「サイトURL」は、独自ドメインのアドレスです。
(2)インストール完了画面の「管理者ページURL」がWordPressの管理画面になります。ここをクリック。
※ログインするときに必要なURLなので、必ずメモやお気に入り登録しておきましょう。

ワードプレスインストール5

 

WordPressのログイン画面が表示されるので、先ほど決めた「ユーザー名」と「パスワード」を入力してログインします。

ワードプレスインストール6

 

管理画面が表示されればOKです。

ワードプレスインストール7

2017年6月27日 4:33 PM カテゴリー:WordPress講座


ロリポップ!のサーバーに独自ドメインを設定する

ドメインをサーバーに設置

独自ドメインとレンタルサーバーの申し込みができたら、ドメインをサーバーに設定しましょう。

「【ロリポップ!】お申込み完了のお知らせ」のメールの中から、「ユーザー専用ページ」のアドレスをクリック。

独自ドメインの設定1

 

(1)メールに記載された「アカウント」を入力
(2)「ドメイン」を選択
(3)申し込みの時に決めたパスワードを入力
「ログイン」をクリック。

独自ドメインの設定2

 

ユーザー専用ページから「独自ドメイン」→「独自ドメイン設定」をクリック。

独自ドメインの設定3

 

(1)ムームードメインで取得した独自ドメイン名を入力。
(2)「公開 (アップロード) フォルダ」は、自分が分かりやすいフォルダ名を半角英字で付けます。
「独自ドメインをチェックする」をクリック。

独自ドメインの設定4

 

「【ムームードメイン】ご契約完了のお知らせ」のメールに記載されている、
(1)ムームーIDを入力。
(2)パスワードを入力。
「ネームサーバー認証」をクリック。

独自ドメインの設定4

 

内容を確認して、「設定」をクリック。

独自ドメインの設定6

 

以上で、独自ドメインの設定は完了です。お疲れさまでした。
ドメインが反映されるまで1時間ほどかかりますので、しばらくお待ちください。

設定自体は難しくないですが、あのパスワードなんだっけ?と忘れがちなので、まとめてメモをとって一か所に保管しておくと管理が楽です。

2017年6月22日 2:28 PM カテゴリー:WordPress講座


1 2 3