問合せフォームcontact form 7をワードプレスに設置する方法

あれ?デジスマホブログには問合せフォームがない・・・

どうもデジオです。ブログを作成して約1ヶ月経過しましたが

お問合せする場所がないことに気がつきました。

まだブログにアクセスがないから問合せする人も実は全くいないんですが

今後 当ブログが人気出ることを考えて

問合せフォームを作成することに決めました。

問合せフォームを設置するといっても、ワードプレスの問合せフォームを作成するプラグインがたくさんあるので
contact form7というワードプレスの問合せフォームのプラグインを設置しようと思います。

今回のデジスマホブログでは問合せフォームを作成するワードプレスプラグイン

contact form7のインストールからブログ設置方法までを公開していきます。

ワードプレスにcntact form 7プラグインをインストール方法

ワードプレスの問合せフォームを作成するプラグイン、コンタクトフォーム7をインストールする方法です。

contactform7プラグインインストール説明画面

プラグイン→新規追加に進む

キーワードの所からcontact form7と検索!contactと調べても出てきました。

contact form7のプラグインをインストール後、有効にする。

問合せフォーム作成プラグインcntact form 7のやり方や設定方法

cntact form 7のプラグインはワードプレスの管理画面のどこで設定するのか?どうやればいいのかを調べてみました。

Contact Form 7で問合せフォーム作成

コンタクトフォームのプラグインをインストールするとワードプレスの管理画面にお問合せと表示されます。

お問合せから新規追加と進みましょう。

問合せフォームをコンタクトフォーム7で作成説明画像

問合せフォームの表示設定が出来る画面になります。
お名前やメールアドレスの順番を変更したり、その他ら時をボタンを設置したり出来ます。

Contact Form新規追加画面

contact form7で問合せフォームの中身を設定後、保存後、ブログ上にはどのように表示されるか並べてみました。

 

Contact Formのメール送信先を変更

contact form7の設定画面でフォームの隣にメールという項目があったので

ここではもともと設定されてるアドレスと違うアドレスを設定してみました。

アドレス変更後は保存を忘れずに。

コンタクトフォームプラグイン編集画面説明

作成したコンタクトフォーム7の編集等はコンタクトフォームというボタンから行えます。

ワードプレスに問合せフォームcntact form 7を設置する方法

問合せフォームプラグインcntact form 7の設定が終わったら、今度はワードプレスに作成した問合せフォームを表示させる方法です。

Contact Formのショートコードコピー説明画像

作成して利用する予定の問合せフォームに行き、ショートコードをコピーします。

個別ページにコンタクトフォームのショートカット貼り付け画像

①問合せフォーム専用のページを作成するために固定ページを新規追加で作成します。

②問合せはコチラという固定ページを作成して、その本文に先ほどコピーしたショートコードを貼り付けて公開

③問合せはコチラというタイトルの固定ページを作成できました。

問合せフォームをワードプレスメニューバーに表示

問合せはコチラという固定ページをワードプレス上で表示する設定方法です。

①外観からメニューに行きます。

②先ほど作成した固定ページ、問合せはコチラをメニューに追加します。

③メニューを保存で完成です。

cntact form 7のプラグインをワードプレスに設置した表示結果

設置したコンタクトフォームをワードプレスのブログ上でどのように表示されてるか見てみます。

ワードプレス問合せフォーム表示説明画像

ブログ上で見てみると問合せはコチラというボタンがヘッダーメニューに表示されてます。

ワードプレス問合せフォーム設置画像

問合せはコチラボタンを押すと、きちんとワードプレスプラグイン、コンタクトフォーム7で作成したページが表示されてました。

問合せフォームプラグインcntact form 7まとめ

ワードプレスの問合せフォームプラグインのcntact form 7で設置した問合せフォームに名前やアドレスを入力して送信すると、きちんと設定したアドレスにメールが届いてました。

簡単に問合せフォームをワードプレスに作成するとしたらcntact form 7のプラグインお勧めです。

TinyMCE advancedプラグイン!ワードプレスの新規投稿で文字の大きさを変更するプラグイン!を入れて文章を書いてみた!

どうも いつも当ブログを見て頂きありがとうございます。

今回は文字の大きさやフォントや文章を様々な機能で編集可能なワードプレスプラグインを今回は紹介したいと思います。

ワードプレスで文章を書く際に文字を大きくしたり書式を変更する機能

プラグインTinyMCE advanced! 

ワードプレスで文章を書いてて文字を大きくしたい!文字のフォントをもっとゴツゴツした書式にしたい等、多種多様な見せ方が出来るプラグインです。

最初のワードプレスの機能では出来ない事が TinyMCE advancedというプラグインを入れることによって文字を大きくしたり書式を変えたり下線を引いたりと様々な編集が出来るようになります。 “TinyMCE advancedプラグイン!ワードプレスの新規投稿で文字の大きさを変更するプラグイン!を入れて文章を書いてみた!” の続きを読む

ワードプレス管理画面でグーグルのアクセス解析グーグルアナリティクスでアクセス等を簡単に見る方法!

ワードプレスの管理画面でブログのアクセスを見るプラグインと登録方法の紹介です。

いつもで当ブログを見て頂きありがとうございます。今回はブログをせっかくはじめたんだからアクセスを知りたい!しかも簡単にワードプレスの管理画面内で見たい人にお勧めのプラグインです。

ワードプレスブログのアクセスを見るプラグインを入れる前の準備!

1 グーグルアナリティクスの登録!ログイン方法
グーグルアナリティクス登録方法

グーグルアナリティクスに登録するには→グーグルアナリティクス

グーグルアナリティクスを登録するためには グーグルのアカウントが必要です。
グーグルのアカウントを準備してグーグルのアカウントにログインした状態から進みましょう!

グーグルアナリティクス(グーグルアクセス解析)のアカウントの作り方!

グーグルアナリティクス登録方法

グーグルアナリティクスに登録されてない場合下記画面に行くので申込みから申し込みましょう!グーグルのアクセス解析は無料で使えて便利です。

グーグルアナリティクス申込み

 

グーグルアナリティクス登録設定方法

グーグルアナリティクスの登録時の設定方法

トラッキングIDを取得を押してグーグルアナリティクスのアカウントを作成しましょう。

グーグルアナリティクスの規約に同意をして進む

最後にグーグルアナリティクスを利用するためにはの規約にチェックを2個いれて同意をすると。googleのアクセス解析 グーグルアナリティクスの登録が完了です。

登録完了したら下記の画面になるので下記までいったら次はワードプレスのプラグインを入れる形です。

グーグルアナリティクスの登録完了後の画面

 

ワードプレスでグーグルアナリティクスのアクセス解析をみる方法!

次にワードプレスで登録したグーグルアナリティクスを設定してワードプレスの管理画面でアクセスを見る方法です。

ワードプレスの管理画面でプラグインの新規追加へ進む

ワードプレス管理画面プラグイングーグルアナリティクスを見る

 

プラグインの名前はGoogle Analytics Dashboard for WP by ExactMetricsです

キーワード入力画面からgoogleと検索しても上の方にでるのでGoogle Analytics Dashboard for WP byExactMetrics のプラグインを今すぐインストールボタンからインストールして有効にしてください。

Google Analytics Dashboard for WP byExactMetrics プラグイン有効にする

Google Analytics Dashboard for WP byExactMetrics
プラグインを有効にすると左下にアナリティクスとあるのでそこから一般設定に進みます。

プラグインの認証というボタンがあるのでグーグルアナリティクスの登録が終っていたらプラグインの認証を押す!

グーグルアナリティクスワードプレス管理画面設定方法

グーグルアナリティクス登録後、ログインした状態でアクセスコードの取得を押すとコードを発行してくれます。

グーグルアナリティクスワードプレスプラグイン認証方法

グーグルのアカウントで何を使うかがでてきます。どのアカウントを使うか選択します。デジオの場合はアカウント名001を選択しました。

googleアカウント選択画面を選択してワードプレでグーグルアクセス解析設定

プラグインがグーグルのアカウントへのアクセスをリクエストするので許可に進みましょう!

グーグルアナリティクス強化設定画面
グーグルアナリティクスのアクセスコードが発行されるのでコピーしましょう。
グーグルアナリティクスaccesscode発行

上記で発行したアクセスコードを貼り付けて、アクセスコードを保存で完了です。

ワードプレスグーグルアナリティクスアクセス解析アクセスコード発行貼り付け

上記画面でアクセスコードを保存を押して成功するとプラグインの認可が成功しましたと出ます。失敗するとこの画面になりません。

ワードプレスグーグルアナリティクスアクセス解析登録成功

最後にグーグルアナリティクスダッシュボードの確認方法です。
ダッシュボードから進んでダッシュボードの下の方にあります。
グーグルアナリティクスワードプレスアクセス解析確認方法

ワードプレスブログ内の記事に画像を記載する方法!

どうもデジオです。ワードプレスでブログを作り始めてだいたい1週間が経過しました。

ワードプレスブログの記事内で画像をUPする方法やアップ画像の編集方法をまとめました。

wordpressでは画像をあげる画面に関してメディアという項目を用意していて、写真とか画像とかかかれていないのでわかりにくいかもしれないです。

ワードプレスに写真をUPする方法です。

まずは利用する画像を準備してワードプレスの記事内で写真をアップするための準備となります。

1 メディアの新規追加から画像をUPする!
ワードプレスに写真をアップする

wordpress画像アップでアップロードするファイルをドロップで画像UP!

 

2 新規追加からアップされた画像は編集ボタンまたはライブラリから代替テキスト等を登録可能

メディアの新規追加から画像をアップすると出てくる編集ボタン

編集ボタンを押すと画像の名前や代替テキストや画像の説明文を記録できる。メディア新規追加画像アップから編集

3 メディアのライブラリでいつでもワードプレスに登録された写真が確認可能です。

メディアのライブラリや新規追加を使って画像をUPできますがブログの記事を書く画面でも画像はアップロード可能となってます。

ワードプレスブログの記事の中に写真を入れる方法です。

1 投稿新規追加からまずはブログの記事投稿画面に進む
ワードプレスブログで記事を書く

2 タイトルや本文を記載しながら画像を入れる場所を決める

3 記事内に画像を入れたい場所からメディアを追加ボタンを押してアップロードした画像を記事に入れる

画像を入れたい場所を選択後、メディア追加ボタンに進むとアップロードした画像一覧がでてきます。

ワードプレスブログ記事内に画像をアップして表示する方法001

アップロードした画像一覧の名前を見ながら挿入したい画像を選択して投稿に挿入ボタンで画像をアップ!
ワードプレスで記事内に画像をアップロードする方法

ブログは画像をあらかじめ準備しておいてそれにあわせて記事を書くパターンと

記事を最初にアップしていって 後で 画像をアップするパターンがあると思います。

記事投稿の上の方にあるメディアを追加ボタンを押すとライブラリやファイルをアップボタンがあるので

画像を用意してからブログを書いても、ブログを記載しながら画像を用意する形でもどちらでも出来ますね。

 

普通に画像無しでブログを公開したら下記のようになります。
ワードプレス画像写真無しの記事

画像をアップしながら記事を書くと読んでる人にもわかりやすい状態になります。

デジスマホのブログももっとわかりやすくて写真を多めのブログに今後もしていきます。