elementor
elementor
-
１．reCAPTCHAのサイトキーとシークレットキーを取得します。必ずv3で取得してください。
２．WordPressにログインし、reCAPTCHAキーを書き込みます。
Elementor → 設定 → 連携
書き込んだら、画面いちばん下までスクロールして「更新」（青いボタン）をクリックします。
３．固定ページのお問い合わせフォームをElementorで編集します。
「+ 項目を追加」をクリックし、新しい項目のType を「reCAPTHCA V3」に設定します。
「更新」（緑のボタン）をクリックします。以上です。
-
テンプレートはここです
1.左側のウィジットのプロ版の「Form」をドラックして配置
2.フォームの項目を追加する
Typeの内容
ドロップダウンに用意されている「Filed」は、以下の通りです。
テキスト
これは、シンプルなタイプのフィールドで、名前とかを入力します。
Email
Eメールアドレスを入力するフィールドです。
Text Area
テキストエリアで自由に文章を入力することができるフィールドです。（コメントやお問い合わせ内容に使用）
URL
URLを入力するフィールドです。
Tel
電話番号を入力するフィールドです。
Radio
ラジオボタン形式のフィールドで、設定した選択肢に1つにチェックを入れてもらいます。「Inline List」を「はい」にすると、横並びに、「いいえ」にすると縦並びにすることができます。
Select
ドロップダウン形式で1つの選択肢を選んでもらうフィールドです。「Multiple Selection」を「はい」にすると全部の選択肢が表示されます。
Checkbox
チェックボックス形式のフィールドで、これは「Radio」や「Select」フィールドと違って複数の選択肢を選べます。「Inline List」にチェックを入れると選択肢が横並びになります。
Acceptance
条件を入力して、ユーザーに許可をもらうためのフィールドです。例えば、条項を読んで同意してもらう時とかにしようします。
Number
番号を入力するためのフィールドです。「Min. Value」に最小値、「Max. Value」に最大値を入力します。そして、ユーザーに設定した数値の内1つの数字を選んでもらいます。
Date
日付を選択するフィールドです。「Min. Date」に最初の日付、「Max. Date」に最後の日付を入力して、その間の日付を選択してもらいます。「Native HTML5」を「はい」にすると、フィールドの表記が「年/月/日」になり、ドロップダウンをクリックするとカレンダーが表示され、日付を選択できるようになります。
Time
時間を選択してもらうためのフィールドです。「Native HTML5」を「はい」にすると、「–:–」という表記になります。
File Upload
ファイルをアップロードしてもらいたい時に使用するフィールドです。「Max. File Size」にファイルの大きさの最大値を入力します。「Allowed File Type」では、許可するファイルタイプを入力します。「Multiple Files」を「はい」にすると、複数のファイルをアップしてもらえるようになります。「Max. Files」では、アップロードできるファイルの数に上限を設けることができます。
Password
パスワードのフィールドを追加することができます。
HTML
HTMLを使ってフィールドを追加したい場合はこれを使います。もしくは、注意書きなどをしたい時にも使えます。
Hidden
隠しフィールドを追加できます。ユーザーには、見えませんが、Adminユーザーには見えます。
reCAPTCHA
reCAPTCHAを追加できます。ユーザーがロボットでないか確認したい場合に、追加します。
Honeypot
フォームに「Honeypot」を追加できます。スパムを防止するためのものです。
2.クライアントへ自動通知メール
エンドユーザー様からお問い合わせあった時にクライアントに自動でメールが行く設定
- To（宛先）： フォームの送信結果を送信する電子メールアドレスです。カンマで区切って追加のメールアドレスを入力してください。
- Subject（メールの件名）： メールの件名です。
- Message（メールの内容）： メールの本文。デフォルトでは、すべてのフォームフィールドはショートコード[all-fields]で送信されます。
- From Email（送信元メールアドレス）：「送信元」の電子メールアドレス
- From Name（送信元の名前）：「送信元」の名前
- Reply-To（返信先） ： 返信用のメールアドレス
- CC ： CCへのメールアドレス
- BCC ： BCCへのメールアドレス
- Meta Data（メタデータ）： 利用可能なメタデータはデフォルトで含まれています。メールに含めたくないものは、それぞれの 「x」をクリックして削除してください。
- Send As（送信者）： メールを送信する形式をHTMLまたはPlainのいずれかから選択します。
3.エンドユーザー様へ自動返信メール
エンドユーザー様からお問い合わせあった時にエンドユーザー様自身に自動でメールが行く設定
●Email2追加
※Form Fieldesのコードがある場所↓
※受信先を自分にして確認メールを必ずしてください。 5.受信確認のメッセージ
エレメンターは確認画面が出ません。正常に送信できたかどうかは送信ボタンあたりに
出るメッセージで判断します。デフォルトでは英語になってるので日本語に訳してください。
-
【1番目】
ブログのアーカイブをこの見え方にしたい時の設定を行います。
【2番目】
外観 ＞ ウェジェット ＞ アーカイブ ＞ドロップダウンで表示 ＞ 完了
これで完了です。あとはCSSで調節しましょう。
-
ワードプレスの初期設定で追加でやることを説明します。
【１番目】
ワードプレスの初期設定の状態だと解像度が低いのでこの作業を行ってください。
＜谷井さんスレッド参照＞
WPの初期設定なのですが、流石にこのご時世この解像度は低すぎるので、
インストールが完了した時点で変更しておいてください。投稿の際にメディア挿入時に大きめに表示されます。
【2番目】
次にこの作業を行ってください。
＜谷井さんスレッド参照＞一覧表示の際にブロックレイアウトが一般的になってくると思うので、余りが出ないように偶数、
あるいは横に並べる列の倍数（4カラムの場合8・12・16…）にしておいて下さい
【3番目】
エレメンターのフレックス機能を使えるようにするために
下記の赤枠の部分2つを有効にしましょう。
※エレメンターDEV になっていないと、エレメンターDEVで作ってあるサイトのテンプレートを
エクスポートするときにエラーが出ます。
-
（ ブログ・新着情報・お知らせ ）などができてきたら、ユーザーの追加をしていきます。
今回は水上芳一さんのユーザーを追加していきます。
【1番目】● ユーザー ＞ 新規追加
【2番目】
まず、お客さんの情報を入力していきます。
保存するまえに、ユーザー名とパスワードはLocalsetting.txtにメモしましょう。
セキュリティーの都合上パスワードの部分はモザイクをかけているので詳しくは↓＃水上芳一商店のスレッド（10月8日 (金) 16:19）の会話です。
途中から＃wordpressインストールのスレッド (10月8日 (金) 16:26)から続きの会話をしています。
（谷井さんスレッド参照）新規ユーザーを追加で
- ユーザー名：user
- パスワード：わかりやすく長ったらしいもの
メールアドレスは取りあえず「 自分の@providesign.co.jp 」で
（※今までは谷井さんのメアドでしたが、自分のメアドにしてください。）
userのメアドは本公開直前にお客さんのメアドに差し替えます。
権限グループは投稿者、必須以外はそんな感じで
ユーザー権限の参考サイトはこちらを御覧ください。
【3番目】保存したら一覧に、「user」が追加されます。
実際に、「user」でログインできるか確認しましょう。
新規登録すると自分宛にメールが届くので確認してください。
↓の画像は古いので
ユーザー名：root-admin → staff.providesign.com@gmail.com
ユーザー名：user → 自分の@providesign.co.jp
になっていれば正しいです。
【6番目】
「user」側と「admin」側について違いを説明します。下記の画像を見くらべると、
「user」でログインした方は固定ページなどがないことがわかります。
つまり、新規追加の設定の時「投稿者」に設定した「user」側は固定ページの更新権限はありません。
【7番目】
次に投稿のページの説明をします。
※ 必ずこの作業を行いましょう
「user」側には「admin」側で投稿した記事を編集する権限がありません。
なので「admin」側で投稿したものを全て「user」に変更します。
こうすることで、「user」側で編集することができます。
投稿 ＞ クイック編集 ＞ 投稿者 ＞userに変更（adminになっているすべての記事）
【8番目】
すべて変更できたら「user」でログインしてください。
「admin」で投稿していた記事が編集できるか、「user」側でも投稿がでるか確認しましょう。
【9番目】
投稿確認がおわったら最後に「user」側の表示オプションを設定して
ユーザー追加の一連の流れは完了です。
（水上さんのアカウントにエレメンターの告知やWordpressのイベントは関係ないため）
表示オプション ＞ Elementor 概要 / WordPress イベントとニュースのチェックを外す
- ユーザー名：user
-
エレメンターの細かい設定をしていきます。
【1番目】
この後の工程に必要になるので、固定ページで空のトップページと新着情報のトップページを作ります。
（ 新着情報のトップページというのは中央社労士さんで言うところのトピックスの部分です )
● 固定ページ ＞ 新規追加 ＞ トップページと新着情報の空のページ作成
【2番目】固定ページが出来上がったら、設定から表示設定を開きます。
WordPressは元々「ブログ」なので初期設定ではトップページは「ブログ一覧」になっています。
なので「ホームページの表示」が「最新の投稿」になっています。
これを固定ページの特定のファイルを「トップページ」に指定してあげないといけません。
● 設定 ＞ 表示設定
【3番目】
表示設定を開いたら、他のサイトを参考にしながら勧めていきます。（中央社労士さんを参考にしました）
設定する箇所は「ホームページの表示」の部分です。
① 固定ページにチェック
② ホームページ：トップページ
③ 投稿ページ：新着情報にチェック（トピックス・お知らせ・新着情報など・・・名前はサイトによって変わる）
【4番目】表示設定を変更するとまず、固定ページ一覧の表示が変わります。
「トップページーElementor」「新着情報ーElementor」の部分の表示に注目してください。
「トップページーElementor」→「トップページーフロントページ, Elementor」
「新着情報ーElementor」→「新着情報ー投稿ページ」
に変更されました。この見え方になっていればOKです。
【5番目】一覧以外にも中の編集ページ部分の表示も変わります。
トップページの編集画面に移動してパーマリンクをクリックしてください。
● トップページ ＞ 編集画面 ＞ パーマリンク
表示設定前のパーマリンクの部分が変わったことがわかります。
パーマリンクのところが表示設定が未設定の時
「https: //mizukamimiso.com/トップページ /」
↓
表示設定変更後
「https://mizukamimiso.com/」だけになったのがわかると思います。
スラッグを入れる項目も消えました。
つまり、表示設定の変更で ホームページ：トップページ に変更すると、
「トップページ」がindex.phpに切り替わったと言うことになるのでOKです。
【6番目】新着情報のページやこれから作る固定ページのパーマリンクの設定は、トップページの表示と少し違うので
説明していきます。
新着情報の編集画面からパーマリンクをクリックしてください。
● 新着情報 ＞ パーマリンク
トップとは違いURLスラッグが表示されていて、固定ページを表示の部分も
https://mizukamimiso.com/新着情報/のままなことがわかります。
「URL スラッグ」というのは中央社労士さんでいうこの /free の部分になります。助成金のページだったら /subsidy になります。
なので、「URL スラッグ」を漢字から英語名に変える必要があります。
新着情報の場合英語名はnewsがいいと思ったので、「URLスラッグ名」を news に変更しました。
すると「固定ページを表示」の部分も自動で変わるので完了です。
【7番目】
トップページのパーマリンクの確認と新着情報のパーマリンクの変更をしたら、
全ページの固定ページを空ページで作成していきます。
この時、新着情報の時と同様にパーマリンクの「 URLスラッグ名 」も変更していきます。
【8番目】
これでエレメンターの一連の設定は完了です。
-
【1番目】
● プラグイン ＞ 新規追加 ＞ 各プラグイン検索
必要な各プラグインを追加していきます。
※エレメンターは最後にインストールします。
エレメンターのインストールは【4番目で解説します】
まずはエレメンター以外をインストールしてください。
「各プラグインの種類」
今回は、中央社労士さんのエレメンターのプラグイン名をコピペして検索しました。
下記のものはすべてインストールしてください。
・Advanced Custom Fields
・All-in-One WP Migration
・Breadcrumb NavXT
・Category Order and Taxonomy Terms Order
・Custom Post Type UI
・Yoast Duplicate Post
・Elementor
・Elementor Pro
・WP-Optimize ← 20230822更新（このプラグインも追加してください）
「WP-Optimize」はどんな時に使うプラグインなのかこちらを確認
【2番目】
● 検索 ＞ 今すぐインストール ＞ 有効化
検索すると沢山のアイコンが出てきますが、
基本的にプラグイン名＋○○はそのプラグインの拡張プラグインなので
「プラグイン名」のみ を探してください。（ 検索した名前と同じ名前のもの ）
【 3番目 】
有効化をクリックすると自動で一覧のページになるので、各プラグイン同じようにインストールしてください。
【4番目】エレメンターのプラグインを入れる時はまず、
●「Elementor」 で検索 ＞ 「Elementor Website Builder」を インストール ＞ 有効化
【5番目】エレメンターをダウンロードできたら次は、エレメンタープロ版をダウンロードしていきます。
① サイドメニュー「Elementor 」から「★プロ版にする」をクリックすると別ページに飛ぶので、LOGINを押します。
● プロ版クリック ＞ 別ページに移動される ＞ ログインする
② ログイン画面がでてくるのでエレメンターログイン情報を入力していきます。
ドロップボックス ＞ 共有：ドキュメント ＞ エレメンターログイン情報 ＞ Elementor.txt
をコピーしてユーザー名とパスワードを入力します。
● ログイン画面 ＞ ユーザー名 ＞ パスワード ＞ ログイン
③ ログインするとこの画面になります。
青枠で囲んだダウンロードのアイコンをクリックします。ファイル名が表示されるのでクリックします。
zipがダウンロードされるので、[ WP-CORE ] のファイルに追加します。
● ダウンロードのアイコン ＞ zipファイルをダウンロード ＞ダウンロードされたzipファイルを [ WP-CORE ]のファイルに入れます。
④ ダウンロードしたプロ版のzipファイルをプラグインに追加していきます。
● プラグイン ＞ 新規追加 ＞「プラグインのアップロード」からダウンロードしたzipファイルをアップロード
⑤ アップロードするとこの画面になるので有効化をクリックします。
有効化されると、自動で一覧のページに戻るので、プロ版がアップロードされているのを確認します。
確認できたら、「 Connect & Activate 」の赤文字をクリックします。
● アップロード ＞ 有効化 ＞ 一覧のページに戻ります ＞ 「 Connect & Activate 」の赤文字クリック
⑥「 Connect & Activate 」の赤文字をクリックをくりっくしたら、Elementor.comのページに飛びます。この画面になったら「Activate」をクリックします。ワードプレスの画面に切り替わってエレメンタープロ版
インストール完了です。
● Elementor.comの画面に飛ぶ ＞ Activateをクリック ＞ インストール完了
【6番目】プラグインの流れはこれで終了です。
ワードプレスの構築：その2（一連の流れ）の【4番目】※必ず確認からエレメンター設定の説明をします。
ワードプレスの構築：その2（一連の流れ）「4番目」※必ず確認を御覧ください。
-
ワードプレスをインストール完了後にやる事を説明します。
一連の流れとしては、
● サイトの基本設定【1番目〜2番目】
● 必要なプラグインのインストール【3番目〜別ページ】
●テストディレクトリの設定【4番目】 ※必ず確認
● 基本設定【5番目〜9番目】
● テンプレート（Providesign）のインストール【6番目】
になります。【 1番目 】
① 設定 ＞ パーマリンク を開きます
② 数字ベースにチェックを入れます
③ 変更を保存
「谷井さんスレッド」このあたり、マンテンの湯、中央社労士、かわかみ歯科まったく同じなので、それぞれ横に開いておいて違いを見ながら進めていくといいです。
【 2番目 】① 試しに記事を投稿します。
② 投稿 ＞ 新規追加 ＞ 公開
③ 投稿できたか確認
投稿確認すると緑のページになりました。（初期設定の状態）最後にプロヴィのテンプレートを入れるので今は緑の画面でもOKです。
【3番目】必要なプラグインを入れます。
プラグインの追加方法は下記のページを御覧ください。
ワードプレスの構築：その3（プラグインの追加方法）
「各プラグインの説明」
（谷井さん解説スレッド参照）
① Advanced Custom Fields
投稿画面とかで入力フィールドを追加するときに使用します。
具体的には満天の湯のこの部分！
② All-in-One WP MigrationWordPressはサーバー上にしかデータが残っていないため、万が一の時にバックアップが必要です
全ファイルをバックアップするために入れておきます。
③ Breadcrumb NavXTこれはパンくずリストこのあたりは割とおなじみ
④ Category Order and Taxonomy Terms Order投稿カテゴリをWP標準では上下出来ないのでインストールしておきます
・スタッフブログ
・新着情報
↓
・新着情報
・スタッフブログ
と行ったカテゴリの並べ替えです
⑤ Custom Post Type UI脇法律事務所さんのように通常投稿に加え、「よくある質問」のような独立した投稿を作成する場合に使用します。
⑥ Yoast Duplicate Post記事を複製します。これも馴染みがあるかと思います
具体的には・・・
⑦ WP-Optimize ← 20230822更新（このプラグインも追加してください）
この機能は、エレメンターの編集ページを保存するときに使われる容量を軽くするために入れるプラグインです。
「 ワードプレスの構築：その3（プラグインの追加方法）」をご覧ください
【4番目】※必ず確認全てのプラグインを追加したらエレメンターの基本設定を行いますが、注意することがあります。
この部分のスレッドの記事は↓
＃wordpressインストールのスレッドの（9月29日（水）15：46 に書いてあります。）
あわすのさん・ナカゼさん・アトリエモニさんのように元々のサイトが存在していて、
それを消さずにバックグラウンドで進めなければいけないケースのテストディレクトリ設定方法を説明します。
例 ナカゼさんの場合「https://gaiheki-doctor. jp/」が現在生きているページ
↓
「 https:/ /gaiheki-doctor.jp /test/ 」がバックグラウンドで進めているもの
※このようにテストページで進めいいかなければいけない場合は下記の設定を必ず行ってください。
① 設定 ＞ 一般設定
②サイトアドレス（URL）に 「test」 をつけたす
③変更を保存で完了
バックグラウンドで制作を進め完成後、本番サイトに直す時は「/test」を消して保存して公開してください。※ 注意することはサイト内でのリンクなどで「test/service/」などは最終的に直さないといけません。
【4-2番目】※追加記事キャッチフレーズの部分も記入する
【5番目】
エレメンターの基本設定をおこないます。
エレメンターを使うのは固定ページだけなので、
① Elementor ＞ 一般 ＞「投稿」にチェックを外す
② その他のチェックは他のサイトを参考に。（今回は中央社労士さんを参考にしました。）デフォルトカラーを無効化チェックする ＞ デフォルトフォントを無効化チェックする ＞
使用状況データの共有チェックする
③変更を保存
【6番目】
「4番目」の基本設定が終わったら、今インストールした環境設定はサーバー上にしかいないファイルとして
・.htaccess
・wp-config.php
が存在します。
これらは上書きしないように
「web-content」にダウンロードしておいてください。
① サーバー側で右クリック更新 ＞ ドロップボックス側にダウンロード
【7番目】【5番目】が終わったら、試しに投稿したものをProvidesignのテンプレート表示にする設定を
行います。（上記の【2番目】の仮投稿の表示の部分）基本設定が同じというとで、今回は中央社労士さんからProvidesignのテンプレートを持ってきました。
※サーバーにアップする前に、「Providesign」の中身に〜202109***チルダ付きのものがないか確認しましょう。
見つけたら不要なので削除してください。
① 中央社労士サイトの「 wp-content 」ををそのままお客さんのフォルダに持ってくる② providesignテーマの中にある~202109***は不要なので削除
③ Providesignのフォルダをサーバーにアップ
【8番目】
Providesignのテンプレートをサーバーにアップできたら、ワードプレスに戻ります。
外観からプロヴィのテンプレートが外観の一覧に表示されているので、有効化して投稿ページの
表示を確認して、プロヴィのテンプレートになっていれば完了です。
● 外観をクリック ＞ Providesignのテンプレートを有効化 ＞ 投稿ページ表示確認
【9番目】ここまでの一連の流れが完了したらエレメンターの細かい設定をしていきます。
ワードプレスの構築：その4（エレメンターの設定編）をご覧ください。
ワードプレスの構築：その4（エレメンターの設定編）
-
【1番目】
ワードプレスをインストールするところから初めます。
https://ja.wordpress.org/download/
にアクセスしてください。（バージョンは常に新しくなります）
【2番目】「wp-core」の名前を付けたファイルを新規で用意しておきます。
ダウンロードしたzipファイルを「wp-core」のファイルに移動します。
移動できたらzipファイルを解凍します。
①wp-core の名前を付けたファイルを用意② wp-core ＞ zip解凍
【3番目】解凍した「 wordpress 」中身をサーバー側に移動します。
この時、中身だけサーバー側にアップしますが、
ドロップボックスの「web-content」に移動はしなくていいです。
（サーバー上に移すと今後ほとんど使う予定がないそうです。ドロップボックスの「web-content」に持っていくと
全文検索の邪魔になるので持っていかないケースが多いそうです。）
※サーバにアップする時の注意点として、同名ファイルが既にサーバー上にいないか気をつけてください。
【4番目】
サーバーにアップできたら、
「 https://○○○○○（お客さんのURL）.com/wp-admin/ 」でワードプレスを開きます。
さあ、始めましょう！をクリックしてください。
【5番目】データベース接続のページがでるので、ローカルセッティングの情報を入力していきます。
※漏れてはいけない情報なので、資料の一部モザイクかけてあります。
※情報入力の時・「テーブル接頭辞」は通常触る必要はありません。データベースのホスト名は変更する場合としなくていい場合があるので、ローカルセッティングを確認してください。
入力が終わったら送信をクリックしてください。
【6番目】
送信されたら、このページがでてくるので「インストールを実行」をクリックしてください。
【7番目】ようこその画面になるのでワードプレスの情報を入力していきます。
① サイトのタイトル 例〇〇株式会社（これはすべてのページに表示されます。あとで変更出来ます）
② ユーザー名：取りあえず管理者のアカウントを作る必要があるので「root-admin」
※最近は「admin」を狙ったハッカー攻撃が多いので「root-admin」にしてください。
③ パスワード：表示されているパスワードは長すぎるので通常
「 https://rakko.tools/tools/6/ 」からコピってきています。
推測されやすいと、「強力」が「安全ではない」などとなると思いますので、切り替えてください。
（ハイフン、アンダーバーなどを取り混ぜるとOK）
④ メールアドレスはWordpressの自動アップデートなどの際にアナウンスされるメールアドレスなので、
「 tanii@providesign.co.jp 」にしておいてください。
「 staff.providesign.com@gmail.com 」にしておいてください。(管理メールアドレスは「tanii@」にしていると谷井さんが不在の時にWordpressでなにかトラブルがあったときに対処できない為)
⑤ ユーザー名・パスワードは重要なのでLocalsettingに書いておいてください。
【8番目】インストールが完了したら、成功しました！のページになるので、ログインします。
ワードプレスの画面になったらインストール完了です。
【９番目】ワードプレスのインストールが完了すると谷井さんにメールが届くので、確認してください。ワードプレスのインストールが完了すると「staff…」にメールが届くので、確認してください。
次にワードプレスの設定のページを御覧ください。
ワードプレスの構築：その2（一連の流れ）
-
① ワードプレスの構築：その1（インストール編）まずはワードプレスをダウンロードしてください。
② ワードプレスの構築：その2（一連の流れ）
途中にプラグイン追加方法の説明が入るので③をご覧ください。
③ ワードプレスの構築：その3（プラグインの追加方法）
必要なプラグインをインストールします。
② ワードプレスの構築：その2（一連の流れ）必要なプラグインが追加できたら、その②に戻ります。
【4番目】※必ず確認から設定の続きを説明します。
⑤ ワードプレスの構築：その4（エレメンターの設定編）
エレメンターの細かい設定をして完了です。
⑥ ワードプレスの構築：その5（ユーザーの追加）
一般ユーザーの追加設定を行います。
⑦ワードプレスの構築：その6（初期設定追加事項）
画像の解像度やカラムについての設定です。
以上がワードプレス構築のマニュアルの流れです。