私は携帯電話というものがあまり普及していなかった頃に
ホームページビルダー2001でＨＰを作ってから、ずっと、ホームページビルダー(ＨＰＢ)を使っています。
「文字と画像によって情報を公開する」のだから「それらが伝わればよい」と思っていたからです。
しかし、昨今はどちらを見ても Word Press 。
どこかに「ホームページビルダーを使っているのは石器時代人」と揶揄されていました。
そこで、
「いったいWord Pressとはどんなものなのか？」、
「自分のＨＰ作成において、Word Press は ＨＰＢより有利なのか？」
これらを知るために Word Press でページを作ってみることにしました。
同じような疑問を感じている方も多いことでしょう。
ここで説明する通りにやれば「ＨＰＢ御用達」の方も Word Press ページを作れます。
まずは、ページを作ってみることです。
そうすれば、「自分の HP と Word Press の相性」が分かり、上の疑問が解消します。
なお、私はずっと html で文章を作ってきましたが、
ＨＰＢ任せで html の知識はまったくありません。
また、Word Press について「右も左も分からない」超入門者です。
「間違った用語・記述・理解・説明」が随所にあると思いますのでご容赦ください。
自分の理解を越える部分には「キャパ越え」と表示します。
1.HPB(html) と Word Press の違いをざっくりと
自分のPCの中に家を造り、そのコピーをサーバーに送って見てもらうのがＨＰＢ( html )。
仕事場は自分のPC。
Word Pressはサーバーに材料と設計図 ( テーマ ) を送るだけ。
サーバーのコンピューターがその設計図通りに家を造り、皆に見てもらう。
仕事場はサーバーの領域。
仕事場がサーバーだから、頁を見ながら訂正ができます。
もちろん、ＦＴＰツールによるサーバーへのアップロードも不要です。
しかし、Word Press の一番の利点は「設計図を変えれば、すぐにその通りの家が出来上がる」こと。
無料設計図がたくさん用意されているので、お好みしだい。
洋風，和風，和洋折衷、自分に設計技術がなくてもおしゃれな家がつくれます。
欠点は「リフォームするためには設計図を変更しなければならない」こと。
「設計図の変更」とは「プログラミングの変更」。
「この部屋のドアを引き戸にしよう」、「この部屋だけ和風にしよう」…。
どんな小さな変更でもプログラミングを変更しなければなりません。
もちろん、代表的な設計変更には修正プログラム ( プラグイン ) が準備されています。
しかし、それもプログラムである以上、元のプログラム ( テーマ ) で作動するかどうか分かりません。
また、もっと細かな修正は自分でやらなければなりません。
結局、ある程度のプログラミング知識が必要となります。
少し怖がらせましたが、とにかく「Word Pressの頁」を作ってみましょう。
同じようにやればWord Pressのホームページが出来上がります。
なお、独自ドメインが必要です。
－設定環境－
・Ｘサーバー / php7.4.4，Word Press5.5
・windows8.1，google chrome
・使用中のホームページビルダー ( hpb19・クラッシック )
・ＩＭＥ(日本語入力) / Japanist2003、親指シフトキーボードＫＢ232
・テーマ : COCOON /バージョン: 2.2.1.8
2.常時ＳＳＬ化
( 常時ＳＳＬ化 )
ＳＳＬ化とは「通信を暗号で行うこと」。
個人情報を渡すときに必要となるものですが、これを「個人情報を渡す頁以外」でも行うのが「常時ＳＳＬ化」。
この常時ＳＳＬ化をしていないと、google chrome で「保護されていない通信」と表示されます。
( 設定 )
●サーバー管理 → ドメイン/ＳＳＬ設定 → ドメイン名/選択する
→ ドメイン → 独自ＳＳＬ設定 → 「ＣＳＲ情報を入る」 → 確認画面へ→ 追加する
→ 右上の関連マニュアル → Webサイトの常時ＳＳＬ化 → .htaccessに必要事項をコピー
( 注意 )
「http://」の頁にリンクを張っただけでは「保護されていない通信」とは表示されません。
そのリンク先が開いたときに「保護されていない通信」と表示されます。
しかし、「http://」が含まれるファイルを頁に表示すると「保護されていない通信」と表示されます。
（直接貼りつけでもインクルードでも同じ）
問題となるのは広告表示。
広告が「 商品リンク・マイリンク 」 の場合はたいていコードに「http://」が含まれています。
広告コードを貼りつける前に「https:// → https://」検索・置換をすることが必要です。
adsenseのコードはＯＫです。
なお、常時ＳＳＬ化すると今までの「http://●●●●」が「https://●●●●」に変わります。
これはまったく別の頁として扱われるので、今までの検索順位は白紙になります。
その結果、 adsense 収益は一気に1/10になってしまいます。
検索順位が元通りになるのには２～３カ月かかります。
できるだけ早い段階で「常時ＳＳＬ化」をしておいた方がよいでしょう。
3.Word Press のインストール
●サーバー管理 → サーバーパネル → Word Press → Word Pressの簡単インストール
→ ドメイン選択画面 → インストールするドメインを選択
※ドメインが一つの場合、「●●.●●」と「●●.xsrv.jp」があるが、●●.●●を選ぶ
↓
●Word Press簡単インストール画面
・ブログ名(漢字・かな・英字可・全角127文字・半角255文字以内) → abcd
・ユーザー名，パスワード(半角7文字～16文字) ，メールアドレス
・キャッシュ自動削除 → ON(デフォルト)
・自動データーベースを生成する → ON
※abcdというフォルダは自動生成されます。前もって作る必要はありません。
※ブログ名は後から変更できません。
※そのブログ名で作られWord Pressがインストールされる場所 ( フォルダ ) も変更できません。
※管理画面でこれらを変更すると管理画面に入れなくなります。
この場合は、Word Pressをアンインストールして初めからやり直さなければなりません。
↓
●確認画面
・My SQLデーターベース名
・My SQLユーザー名
・My SQLパスワード
※自動作成される。
↓
・インストール → 「Word Pressのインストールが完了しました」
↓
●「以下の情報はWordPressの管理画面へのログインや編集に必要な情報です。
必ずメモなどにお控えください。」
・バージョン : WordPress 5.4
・サイトURL : http:// ●●.●●/abcd → これが頁作成画面
・ブログ名 : abcd
・管理画面URL : http://●●.●●/abcd/※※/ → これがWord Pressの管理画面
→ ショートカット作成
・ユーザー名 : ※※
・パスワード : ※※
※以下のMySQLデータベース、MySQLユーザーを作成しました。
・MySQLデータベース名 : ※※
・MySQLユーザー名 : ※※
・MySQLパスワード : ※※
上のサイトURＬ(頁作成画面)を開けばすぐに頁が作れますが、
その前にもう一つやらなければならないことがあります。
( Word Pressの常時ＳＳＬ化 )
サーバーの常時ＳＳＬ化とは別に 「 Word Press の常時ＳＳＬ化」が必要です。
●上の管理画面を開く → 設定 → 一般 → 一般設定
↓
・Word Pressアドレス，サイトアドレスの「http;//」を「https;//」に変える → 変更を保存
4.Word Press の複数インストール
( 別形式の家を作るには )
建てられる家の形式は Word Press インストール１個につき１つです。
ホームページビルダー(ＨＰＢ)では、別フォルダを作って別形式の家が作れましたが
Word Pressでは「ひとつの設計図＝ひとつの形式の家」です。
右カラムの内容を変えるだけでもダメです。
新しい設計図が必要です。
別形式の家を作ろうと思ったら、もう一つWord Pressをインストールしなければなりません。
この点につき、
「別フォルダを作ればそこに別のWord Pressをインストールできる」と説明するサイトがあります。
(なぜか、「Word Pressの複数インストール」で検索トップで出てきます。)
そんなことができるサーバーはどこのサーバーでしょうか？
通常、一つのドメインにつき１個の Word Pressインストールです。
ただし、サブドメインは無料でいくつでも作れます。
だから、Word Pressはいくつでもインストールできることになります。
しかし、「サブドメインを作ってそこに別のWord Pressをインストールする」のであり
「別フォルダを作ってそこに別のWord Pressをインストールする」のではありません。
このように「ウソや聞きかじり」の情報があふれていますので注意してください。
Word Pressを複数インストールすれば、違う設計図 ( テーマ ) で頁を作ったり、
設計図 ( テーマ ) と修正設計図 ( プラグイン ) の相性をチェックしたりすることができます。
( Ｘサーバーでサブドメインを作る )
●サーバー管理 → サーバーパネル → サブドメイン設定 )
→ ドメイン選択(メインドメイン)→ サブドメイン設定追加
→ サブドメイン名 → 確認画面へ進む → 追加する
↓
・「メインドメイン：abcd，サブドメイン名：abcd2」とする。
・ドキュメントルート：abcd/public_html/abcd2/ → ※
・レ無料独自SSLを利用する
※ドキュメントルートについて。
・ホームページ用データーのアップロード先。
・Word Pressに必要なファイルもここにアップロードされる。
・public.htmlの中にサブドメイン用のフォルダが自動で作られる。
・Ｘサーバーの場合このフォルダ名を選べます。
・「サブドメイン名.メインドメイン名」か「サブドメイン名」のどちらか。
↓
・例えば、メインドメインが「abcd」でサブドメイン名を「abcd2」にした場合、
サブドメインは「abcd2.abcd」となります。
このサブドメインのファイルアップロード先のフォルダ名を
サブドメインと同じ「abcd2.abcd」とするのか
サブドメイン名と同じ「abcd2」にするのかの違いです。
フォルダー名が違うだけであとは同じです。
・アップロード先は
「abcd/public.html/abcd2.abcd」か「abcd/public.html/abcd2」になります。
↓
・ここでは後者を選ぶ。
↓
・確認画面
・サブドメイン：abcd2.abcd
・ドキュメントルート：/abcd/public_html/abcd2/
・コメント：空欄
・無料独自SSL設定：追加
↓
・追加する
↓
・反映待ち
・1時間以内に有効になる。
↓
・「反映待ち」が消える → 利用できるようになる。
( サブドメインへのWord Pressインストール )
・Word Press簡単インストール → ドメイン選択 → abcd
↓
・Word Pressインストール
↓
・メインドメインのabcd → サイトURL → 「http;// abcd2/abcd」 を選ぶ
↓
・ブログ名 : XYZ → 変更できないので注意
・ユーザー名 : ◯◯◯◯
・パスワード : ※※※※
・メールアドレス : ××××
・キャッシュ自動削除 : ON
・データーベース : 自動でデーターベースを生成する
・テーマ : cocoon (Ｘサーバーでは選べます )
・テーマオプション : 子テーマをインストールする
↓
・確認画面
↓
以下の内容でWordPressをインストールしますか？
・設定対象ドメイン[abcd]
・バージョン WordPress ◯◯
・サイトURL http://abcd2/abcd/
・ブログ名 XYZ
・ユーザー名 ◯◯◯◯
・パスワード ※※※※
・メールアドレス ××××
・キャッシュ自動削除 ON
・MySQLデータベース名 abcd_wp◯◯
・MySQLユーザー名 abcd_wp◯◯
・MySQLパスワード ◯◯◯◯
・テーマ Cocoon
・テーマオプション 子テーマをインストールする
↓
・インストールする
↓
・インストール完了で次の画面が出る
↓
「以下の情報はWordPressの管理画面へのログインや編集に必要な情報です。
必ずメモなどにお控えください。」
・内容は確認したのと同じようなもの。
・管理画面のURLから入るので「ショートカット」を作成。
( Word Pressの常時ＳＳＬ化 )
・上の管理画面を開く → 設定 → 一般 → 一般設定
↓
・Word Pressアドレス，サイトアドレスの「http;//」を「https;//」に変える → 変更を保存
5.設計図(テーマ)を選ぶ
( お勧めのテーマ )
設計図(テーマ)はさまざまなものが準備されています。
Word Press の公式サイトではいろいろなテーマが無料で用意されています。 → こちら
どれを選ぶかはお好み次第ですが、ほとんどのテーマは「お仕着せ」で小変更ができません。
また、外国で作られたものが多く、説明が外国語です。
しかも、その説明が殆どされていません。小変更ができないから説明の必要はないのでしょう。
「黙ってこの設計図を使えばよい。そうしたらこんな素敵な家になるゾ！」ということなのです。
お勧めのテーマは何といっても COCOON です。 → COCOON の特徴
「我が国の一般ユーザーのほとんどが使っている」といっても過言ではないでしょう。
個人の方が作成して無料公開しています。
COCOON ではいろいろな設定 ( 小変更 ) ができます。
フォント種類，大きさ，字間，行間，色、メインカラムの巾，サイドバーの巾など。
また、ＳＥO設定，目次自動設定，adsenseコード自動貼り付け，サイドバー追従，メインカラム追従など。
通常は修正設計図 ( プラグイン ) でやらなければならない機能が付いています。
さらに、マニュアルが充実しています。 → COCOON マニュアル
質問も受けつけてくれます。フォーラムもあります。 → フォーラム
「ＨＰＢ から Word Press 」なら、 COCOON でしょう。
この頁も COCOON で作っています。
( COCOON のインストール )
●cocoonをダウンロード → こちらから ( 親テーマと子テーマの両方をダウンロード )
↓
・ダッシュボード → 外観 → テーマのアップロード → 下にあるZipファイルをドラッグ → 有効化 ( 子テーマだけ )
（ 子テーマだけ有効にする ）
これが初心者の間違うところ。そもそも初心者には「子テーマと親テーマの関係」が分からない。
あちらこちらのサイトに書いてあるのは
「カスタマイズは子テーマにする。親テーマがアップデートされてもカスタマイズは残る」。
どうも「メインは親テーマ、サブが子テーマ」
それでは「親テーマを有効にしておかなくてもいいの？」
子テーマと親テーマの機能的つながりが説明してないから、この疑問がつきまとう。
ネットには「知られていること」しか書いてない。「知らないこと、知りたいこと」にはだんまり。
案外、書いている本人も「知らない」のかも？ネットに書いてありませんからねぇ。
理屈は分かりませんが、「子テーマを有効＋親テーマを有効にしない」が正解らしい。
この頁も親テーマから子テーマに切り換えました。
当然、設定はやり直さなければなりません。
( COCOON は２カラム ）
この頁が２カラムです。
左側がメインカラム ( 主頁 ) 、右側がサイドバー。
上にヘッダーがあるので３分割、ＨＰＢのフレーム頁なら「３分割縦横－５」というタイプです。
サイドバー表示は「cocoon設定 → 全体」で、
「右にするのか左にするのか」、「表示するのかしないのか」、「どの頁に表示するのか」が選べます。
ヘッダーがスクロールに追従してくるようにも設定できます ( ヘッダー固定 )。
だだし、これらの 設定 で作る家の形式は一つだけ。
ＨＰＢなら、新しくフォルダを作れば別形式のフレーム頁を作れましたが、
Word Pressでは「ひとつのドメインに、ひとつのWord Press、ひとつの設計図、ひとつの外観」です。
6.とにかく頁を作ってみよう
( まずは出来上がりを見てみましょう )
●ダッシュボード → 固定頁 → 新規追加
※投稿頁は新しい順に表示される。
※固定頁は動かない。階層が作れる。
※ＨＰＢでの頁作成と同じなのが固定頁。
↓
・タイトル → 任意の文言 ( Word Pressテスト頁 )
↓
・その下の「＋をクリック → 段落」 or「Enter」 → 新しい入力ブロックができる。
↓
・既存のＨＰのプラウザ画面 ( ネットで表示される画面 ) をコピーして貼りつけ。
↓
・更新 → プレビュー
●トップページについて
・「html」での「index.html」に該る頁です。
・Word Pressでは「トップ頁を固定する」か「新しい投稿をトップ頁にするか」を選べます。
・前者なら「トップ頁はいつも同じ」、後者なら「トップ頁が更新される」ことになります。
・トップ頁を固定する場合は「トップ頁用の頁」を固定頁で作成しなければなりません。
投稿頁を使うことできません。
・管理画面 → 設定 → 表示設定 → ホームページの表示 → 最新の投稿or固定頁 → 変更を保存
これがあなたにとって初めてのWord Press頁です。
もちろん、サイドバー設定 ( ウイジェット設定 ) をしていないのでサイドバーは表示されません。
試しに、別テーマに切り換えてみましょう。
●ダッシュボード → 外観 → cocoon以外のテーマを有効化 → 新しく頁を開く
頁の体裁・外観が変わっているでしょう？これがWord Press マジック。
設計図を換えれば、すぐにその設計図通りの家に変わるのです。
ついでに、ブロックの上のツールを試してみましょう。
・Ａの右にある「文字ツール」で、マーカーのアンダーラインが引けます。
・その右の「バッジツール」で文字全体をマーカーで覆います。
こういうところはＨＰＢよりもおしゃれです。
（ ブロック ）
ブロックはさまざまな用途のための「まとまり」です。
「段落，見出し，頁区切り，画像，表，リスト」などさまざまなブロックが準備されています。
このブロックを組み合わせていけば体裁のよいページになるようになっています。
※最上段ツールバーの「＋」/ブロックの追加 でさまざまなブロックが出てきます。
ブロックの上下移動もできます。
私は使ったことがありませんが、ＨＰＢにも「どこでも配置モード（SP）」があります。
それに、近いものでしょうか？
（ ブロックの追加 ）
・最上段ツールバーの「＋」・ブロックの追加をクリック → 見出し，段落など用途にあったブロックを選ぶ。
・ブロックの下に出てくる「＋」をクリックしても同じ。
・「enrter」キーを押しても 新しい段落ブロックができます。
・前の段落ブロックの終わりで「del」キーを押すと、次の段落ブロックが同じ段落ブロックになります。
※注意.「enter」と「shift＋enter」
本来、
・「enter」は「改段落」 → <p>～</p>。
・「shift＋enter」は「段落内改行」 → <br>
ＨＰＢでは文章作成に便利なようにこの操作が逆になっています。
・「enter」＝「段落内改行」 → <br>
・「カーソル下げ」or「shift＋enter」＝「改段落」 → <p>～</p>
段落内改行のつもりで「enter」キーを押すと、新しいぷロックができてそこに移ってしまいます。
もちろん、元の段落の末尾で「del」を押せば、新しくできた段落は消え)ます(元の段落と一緒になる)。
当初はイライラすること間違いなしです。 → こちら
7.サイドバーを作る
( とにかくサイドバーを作る )
ＨＰＢでは右フレームに「サイト一覧やサイトの説明」などが書いてあります。
これを、そのまま右サイドバーに移します。
既存の頁をブラウザで表示させておいてください。
●サイドバー作成
・ダッシュボード → 外観 → ウイジェット → 右上の「アクセシビリティモードを有効にする」。
↓
・利用できるウイジェット → テキスト(任意のテキスト) → 追加
※アクセシビリティモードを有効にしていない場合は▼を押して → サイドバー
または、テキスト(任意のテキスト)をサイドバーまでドラッグ
↓
・ウイジェットテキスト → タイトル/「サイト一覧」など任意
→ テキストブロックにブラウザで表示させた右フレームをコピーして貼りつけ
↓
・サイドバー欄 → サイドバー → 位置/１ → ウイジェットを保存
↓
・元の頁に戻って → プレビュー
これで、右サイドバーにＨＰＢで作った既存頁と同じ右フレームができました。
※ウイジェットのテキストブロックでは文字色を設定できません。
色設定をするときは貼りつけるテキストを通常の段落ブロックに貼りつけて編集してからウイジェットで貼りつける。
●サイドバー追従
・サイドバー追従とは
「画面を下にスクロールした場合、サイドバーが終わってもメインカラムにくっついてくる」こと。
「メインカラム高さ＞サイドバー高さ」のときに役立つ。
・メインカラム追従とは
「画面を下にスクロールした場合、メインカラムが終わってもサイドバーにくっついてくる」こと。
「メインカラム高さ＜サイドバー高さ」のときに役立つ。
・追従をさせない場合はメインカラムとサイドバーが固定されて一緒に動くので、
どちらかが切れれば切れた方が見えなくなります。
・ COCOON でのサイドバー追従設定
↓
・サイドバーに入っているテキスト → 編集 → サイドバー追従/1 → ウイジェットを保存
・また、サイドバーに何も入っていないと、サイドバーが現れないので、
何も書かないテキストをサイドバーに置くが必要です。
利用できるウイジェット → テキスト → 追加 → サイドバー/1
COCOON のように追従機能のないテーマでは次のプラグインを使うようです。
・Standard Widget Extensions
メインカラムＩDとサイドバーＩDの記載が必要。
これを、外観 → テーマエディタ → index.php と sidebar.php で探す。
サイドバーＩDは見つかるが、メインカラムＩDがみつからない。
ＩD設定がされていない場合は、設定書き込みが必要とか。「キャパ越え」
・Q2W3 Fixed Widget
これにはＩDは不要。しかし、思ったように動かない。というより設定がチンプンカンプン。
これで、取り敢えずWord Pressの頁が出来上がりました。
次回は、もう少し体裁を自分好みにしてみましょう。
【広告】
50ccでミニカー
原動機付き自転車扱いです。
前へ/