これから始めるWordPress:STEP 2. サイト構築の下準備

STEP 2. .png

WordPress

以下はTHE THORをテーマに選んだ設定を元に説明して行きます。他のテーマを選んだ場合、項目をテーマ名で検索すれば同様の設定が見つかります。

WordPress5.8より採用されたブロックウィジェットでウィジェットの仕様が変更されていて、今のTHE THORのテーマではクラシックウィジェットに対応出来ません。従って以前のインターフェイス(クラシックエディタ)を使用します。

「クラシックエディタとグーテンベルグ(ブロッグエディタ)」

投稿画面で使うエディッタです。現在WordPressは標準で「ブロッグエディタ」が選ばれています。使い勝手が違うので、最初に決めて置きたいですね。

直感的に使い易いのは「クラシックエディタ」です。記事中にアフィリエイト広告を挿入するのもわかり易いでしょう。プラグインをインストールします。WordPress推薦の物なので安心です。有効化すれば使えます。

プラグインの導入

THE THOR(ザ・トール)は、表示速度にこだわり、重くなりがちなプラグインをできるだけ使わない工夫がされていますが、これから設定・記事執筆に必要になるので別途インストールしておきます。

①Classic aawidgets、クラシックウィジェットに戻すプラグイン
②Classic Editor、以前のクラシックエディタを使うためのプラグイン。
③Classic Widgets、ブロックエディター画面から以前のクラシックウィジェットに戻す

ブロックウィジェットが必要なときは無効にしてブロックウィジェットに切り替えることが出来ます。

クラシックエディタ.png

ブロッグエディタは視覚的に使い易いでしょう。

ブロッグエディタ.png

好みですが「クラシックエディタ」のプラグインはインストールして置くと。両方切り替えて使えます。

プラグインをインストールして「有効化」すると、

WordPressの「設定」→「投稿設定」に下記の項目が追加されています。

blockeditor-01.png

新しく追加されている項目は2つあります。

この項目を「はい」にしておくと、投稿・固定ページ作成画面でエディターを簡単に切り替えることができるようになります。複数のユーザーでWordPressの投稿や固定ページを管理していて、それぞれ使いたいエディターが異なる場合はこの機能を利用してみてください。

初期状態でインストールされているプラグイン

①EWWW Image Optimizerは、画像を圧縮して表示速度を高速化するプラグインです。
②Ultimate Google XML Sitemaps Generator、検索エンジンに認識してもらえるようになります。
③XML Sitemap Generator for Google、XMLサイトマップを自動生成できるプラグインです。
④Google XML Sitemaps、XML サイトマップをGoogle に自動送信してくれるプラグインです。
⑤Akismet Anti-Spamh、コメントスパム対策用のプラグイン。広告を掲載したサイトには利用できないので、アドセンス・アフィリエイトを開設したら無効か削除して置きましょう。

サイト開設に必須な物

①テキストエディッタ
 PC標準のテキストエディタで大丈夫ですが、これから頻繁に使うエディタです。iText Expressは文字数の確認や文章の装飾拡張にはこちらがお勧めです。
無料で高機能、iText Expess WordPress 新規投稿が楽になる

こちらです

 iText Expessの紹介です。 こちらはテキストエディタで無料アプリです。MacOSでもWindowsOSでも標準のテキストエディタが用意されていますが、iText Expressはリッチテキスト形式をサポートしているため、背景の[…]

②画像処理ソフト
 記事作成の度に頻繁に使うので「Photoshop」が有れば便利なのですが、持っていない方にはこれを紹介します。
無料画像処理ソフトお勧めは
人気の無料フォトレタッチソフトGIMP
こちらです

人気の無料フォトレタッチソフトGIMP  Photoshopの代わりに使ってみたら、WordPressで結構使えることを確認。 前にAffinity Photoの体験をしたのですが、GIMP無料ですが、Photoshopに劣らな[…]

③プロフィール画像
 写真でもイラストでも用意しましょう。
④プロフィール(必須)
 自己紹介です。経歴・趣味などサイトに合わせて。
⑤お問い合わせフォーム(必須)
 結構送信されないとの情報もあります。こちらが安心・簡単でしょう。
 正直WordPressで送信出来なくて1年間位お問い合わせフォームで苦労しました。
 固定ページで直接リンクさせる方法で切り抜けていましたが。
Googleフォーム 簡単設置・これで解決
こちらです

Googleフォーム 簡単設置・これで解決 お問合せフォーム設置 これが一番簡単。 永い事お問合せフォーム設置で悩んでいましたがこの度設置に成功。やっと受信出来る様になりました。思えばContact Form 7 の赤枠:「メッセー[…]

⑥個人情報保護法免責事項(必須)
 個人情報保護法免責事項テンプレートで検索すれば出てきますが、参考にして下さい。
 https://design-baum.jp/operation/10987/
⑦サイトマップ(推奨)
 プラグイン「XML Sitemap Generator for Google」で自動生成できます。Googleサーチコンソールに登録すれば完了です。
⑧ヘッダーメニュー設定(グローバルナビゲーションとも言う)
 ダッシュボード→外観→メニュー 

 外観メニュー.png

次に表示させたいページをメニューに追加して行きます。

メニュー.png必要なのは
 ・ホーム
 ・お問い合わせ
 ・個人情報保護法免責事項
 ・サイトマップ
 等です。必要に応じて追加して行きます。
⑨カテゴリーカスタマイズ
 サイドバーに表示される項目です。
 ・「ダッシュボード」→「ホーム」→「ウィジェットの管理」から設置して行きます。
 ①最近の投稿
 ②カテゴリー
 ③固定ページ
 枠のスタイル、色の設定がここで出来ます。
 カテゴリーページのカラーをテーマスタイルに合わせると良いですね。

THE THORでしたので「ブロックエディター」が対応していなくて、苦労しました。ここあさんに教わって「クラシックエディタ」で解決しましたが、「なぜ、なぜ?」でした。

最後にメインビジュアル画像です。

トップページに表示される画像や動画のことを、メインビジュアルと呼びます。
トップページの顔となるメインビジュアルなので、サイトを象徴する魅力的な画像を表示させたいですよね。

おすすめの画像サイズについてはまちまちで、探してみたけど分からないというのが現状です。

サイトを参考に作って見て下さい。

THE THOR メインビジュアル画像新しく作り直してみました。

こちらです

THE THOR メインビジュアル設定 今回はTHE THOR メインビジュアル画像新しく作り直してみました。 皆さんも試行錯誤しながら制作していると思います。 何と言ってもブログのTOP画面ですからね。オシャレに作りたいものです。[…]

サイズから写真もしくはイラストをリサイズして下さい。解像度は96pxになっていますが、72pxで大丈夫です。と言う訳はディスプレイの解像度に依存すると言うことです。72dpiでも96dpiでも変化はありません。大きくしても鮮明になる訳では無いのですね。72dpiでも大丈夫です。ただ気分的に96pxにしているだけです(意味無し)。

k_01.jpg

カスタマイザー画面が開くので、「トップページ設定 > メインビジュアル設定」で設置できます。
・「ダッシュボード」→メディア→メディアライブラリーにアップロードして下さい。

アイキャッチ画像

画像にタイトルやキャッチコピーを入れて視覚的にページをアピールします。
WordPress アイキャッチ画像上手に作りたい

こちらです

投稿画面の顔であるアイキャッチ画像、上手に作って綺麗に表示させたい。WordPress開設時には誰もが思う事ですね。長くサイト運営している先駆者たちは知識と技能を持っていますが、初心者や中級者には難解なところがあります。まずWord[…]

各投稿ページ、固定ページにアイキャチ画像は設置できます。固定ページは無くても不便では無いので設置しない人が多いです。訳は作る手間と画像の容量が節約出来るからです。

以下に表示させない設定を載せて置きます。

66961.jpg

6692.jpg

で「公開」をして完了です。これで固定ページにはアイキャッチ画像は表示されません。

無料素材サイト

①写真素材なら「写真AC」
②無料イラストなら「イラストAC」
③ぱくたそ – 写真素材
 などなど…。

アイキャッチ画像の参考

WEBデザイナーの方のバナー広告のギャラリーサイトです。
https://bannnner.com
画像の使い方、文字の見易さ、色使いなど参考になると思います。バナー広告とアイキャッチ画像とはちょっと似通っていますよね。広告と表紙の違いですが、制約のあるバナー広告よりはアイキャッチ画像の方が制約の幅が広いでしょう。どう感じてどう活かすかは貴方の感性にお任せしますが、見て真似して試行錯誤するのは勉強になりますよ。

せっかく始めたWordPressです。未来への自己投資でWEBデザインのツールを手に入れてみるのは如何でしょう。講座つきのスクールですので割引で一般人もお安く「Adobe CC」が手に入ります。これだけでWEBデザインやWordPressも他には何も要りません。

PR デジハリAdobeマスター講座


ここまででサイトの構築は完了しました。

後は投稿ページに励みましょう。
執筆に疲れたら、今までの設定は変更出来ますので都度好みに変更して行きましょう。

WordPressサイト構築はここまでです。

また長くなりそうなので、次はWordPress STEP 3. に続きます。

これから始める執筆の中で目次制作やアイコンの挿入などをご紹介したいと思います。カスタマイズの仕方についても紹介します。

これから始めるWordPress③:いよいよ投稿・投稿文の作り方

こちらです

さて、サイトの構築も終わりました。後は記事を書いて公開していくだけ。 と、まだ下準備が有ります。 早く記事を書かせろよ。分かります。しかしこれを覚えておくとこれからの執筆が楽になりますよ。 もうちょっと読み進めて下さい。[…]

一休みして訪れて下さい。

疲れて目がしょぼしょぼしたら
PR Eaimiuアイウォーマー

最新情報をチェックしよう!