2021.10.01

elementor

ワードプレスの構築:その2(一連の流れ)



ワードプレスをインストール完了後にやる事を説明します。


一連の流れとしては、


● サイトの基本設定【1番目〜2番目】

● 必要なプラグインのインストール【3番目〜別ページ】

●テストディレクトリの設定【4番目】 ※必ず確認

● 基本設定【5番目〜9番目】

● テンプレート(Providesign)のインストール【6番目】



になります。





【 1番目 】

① 設定 > パーマリンク を開きます


② 数字ベースにチェックを入れます


③ 変更を保存


「谷井さんスレッド」

このあたり、マンテンの湯、中央社労士、かわかみ歯科まったく同じなので、それぞれ横に開いておいて違いを見ながら進めていくといいです。





【 2番目 】

① 試しに記事を投稿します。


② 投稿 > 新規追加 > 公開


③ 投稿できたか確認


投稿確認すると緑のページになりました。(初期設定の状態)

最後にプロヴィのテンプレートを入れるので今は緑の画面でもOKです。





【3番目】

必要なプラグインを入れます。

プラグインの追加方法は下記のページを御覧ください。

ワードプレスの構築:その3(プラグインの追加方法)


「各プラグインの説明」

(谷井さん解説スレッド参照)


① Advanced Custom Fields

投稿画面とかで入力フィールドを追加するときに使用します。
具体的には満天の湯のこの部分!




② All-in-One WP Migration

WordPressはサーバー上にしかデータが残っていないため、万が一の時にバックアップが必要です
全ファイルをバックアップするために入れておきます。



③ 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(エレメンターの設定編)