●ホームページビルダーから Word Press へ



私は携帯電話というものがあまり普及していなかった頃に
ホームページビルダー2001でHPを作ってから、ずっと、ホームページビルダー(HPB)を使っています。
「文字と画像によって情報を公開する」のだから「それらが伝わればよい」と思っていたからです。

しかし、昨今はどちらを見ても Word Press 。
どこかに「ホームページビルダーを使っているのは石器時代人」と揶揄やゆされていました。

そこで、
「いったいWord Pressとはどんなものなのか?」、
「自分のHP作成において、Word Press は HPBより有利なのか?」
これらを知るために Word Press でページを作ってみることにしました。

同じような疑問を感じている方も多いことでしょう。
ここで説明する通りにやれば「HPB御用達」の方も Word Press ページを作れます。
まずは、ページを作ってみることです。
そうすれば、「自分の HP と Word Press の相性」が分かり、上の疑問が解消します。

なお、私はずっと html で文章を作ってきましたが、
HPB任せで html の知識はまったくありません。

また、Word Press について「右も左も分からない」超入門者です。
「間違った用語・記述・理解・説明」が随所にあると思いますのでご容赦ください。
自分の理解を越える部分には「キャパ越え」と表示します。

1.HPB(html) と Word Press の違いをざっくりと

自分のPCの中に家を造り、そのコピーをサーバーに送って見てもらうのがHPB( html )。
仕事場は自分のPC。

Word Pressはサーバーに材料と設計図 ( テーマ ) を送るだけ。
サーバーのコンピューターがその設計図通りに家を造り、皆に見てもらう。
仕事場はサーバーの領域。

仕事場がサーバーだから、頁を見ながら訂正ができます。
もちろん、FTPツールによるサーバーへのアップロードも不要です。

しかし、Word Press の一番の利点は「設計図を変えれば、すぐにその通りの家が出来上がる」こと。
無料設計図がたくさん用意されているので、お好みしだい。
洋風,和風,和洋折衷、自分に設計技術がなくてもおしゃれな家がつくれます。

欠点は「リフォームするためには設計図を変更しなければならない」こと。
「設計図の変更」とは「プログラミングの変更」。
「この部屋のドアを引き戸にしよう」、「この部屋だけ和風にしよう」…。
どんな小さな変更でもプログラミングを変更しなければなりません。

もちろん、代表的な設計変更には修正プログラム ( プラグイン ) が準備されています。
しかし、それもプログラムである以上、元のプログラム ( テーマ ) で作動するかどうか分かりません。
また、もっと細かな修正は自分でやらなければなりません。
結局、ある程度のプログラミング知識が必要となります。

少し怖がらせましたが、とにかく「Word Pressの頁」を作ってみましょう。
同じようにやればWord Pressのホームページが出来上がります。
なお、独自ドメインが必要です。

-設定環境-
・Xサーバー / php7.4.4,Word Press5.5
・windows8.1,google chrome
・使用中のホームページビルダー ( hpb19・クラッシック )
・IME(日本語入力) / Japanist2003、親指シフトキーボードKB232
・テーマ : COCOON /バージョン: 2.2.1.8

2.常時SSL化


( 常時SSL化 )

SSL化とは「通信を暗号で行うこと」。

個人情報を渡すときに必要となるものですが、これを「個人情報を渡す頁以外」でも行うのが「常時SSL化」。
この常時SSL化をしていないと、google chrome で「保護されていない通信」と表示されます。


( 設定 )

●サーバー管理 → ドメイン/SSL設定 → ドメイン名/選択する
→ ドメイン → 独自SSL設定 → 「CSR情報を入る」 → 確認画面へ→ 追加する
→ 右上の関連マニュアル → Webサイトの常時SSL化 → .htaccessに必要事項をコピー


( 注意 )

「http://」の頁にリンクを張っただけでは「保護されていない通信」とは表示されません。
そのリンク先が開いたときに「保護されていない通信」と表示されます。

しかし、「http://」が含まれるファイルを頁に表示すると「保護されていない通信」と表示されます。
(直接貼りつけでもインクルードでも同じ)

問題となるのは広告表示。
広告が「 商品リンク・マイリンク 」 の場合はたいていコードに「http://」が含まれています。
広告コードを貼りつける前に「https:// → https://」検索・置換をすることが必要です。
adsenseのコードはOKです。

なお、常時SSL化すると今までの「http://●●●●」が「https://●●●●」に変わります。
これはまったく別の頁として扱われるので、今までの検索順位は白紙になります。
その結果、 adsense 収益は一気に1/10になってしまいます。
検索順位が元通りになるのには2~3カ月かかります。
できるだけ早い段階で「常時SSL化」をしておいた方がよいでしょう。

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パスワード : ※※

上のサイトURL(頁作成画面)を開けばすぐに頁が作れますが、
その前にもう一つやらなければならないことがあります。


( Word Pressの常時SSL化 )

サーバーの常時SSL化とは別に 「 Word Press の常時SSL化」が必要です。

●WordPress管理画面(ダッシュボード) → 「設定」/「一般」にある
「WordPress アドレス(URL)」・「サイトアドレス(URL)」の「http://」を「https://」に変更。

4.Word Press の複数インストール


( 別形式の家を作るには )

建てられる家の形式は Word Press インストール1個につき1つです。
ホームページビルダー(HPB)では、別フォルダを作って別形式の家が作れましたが
Word Pressでは「ひとつの設計図=ひとつの形式の家」です。

別形式の家を作ろうと思ったら、もう一つWord Pressをインストールしなければなりません。

この点につき、
「別フォルダを作ればそこに別のWord Pressをインストールできる」と説明するサイトがあります。
(なぜか、「Word Pressの複数インストール」で検索トップで出てきます。)

そんなことができるサーバーはどこのサーバーでしょうか?
通常、一つのドメインにつき1個の Word Pressインストールです。
ただし、サブドメインは無料でいくつでも作れます。
だから、Word Pressはいくつでもインストールできることになります。

しかし、「サブドメインを作ってそこに別のWord Pressをインストールする」のであり
「別フォルダを作ってそこに別のWord Pressをインストールする」のではありません。

このように「ウソや聞きかじり」の情報があふれていますので注意してください。

Word Pressを複数インストールすれば、違う設計図 ( テーマ ) で頁を作ったり、
設計図 ( テーマ ) と修正設計図 ( プラグイン ) の相性をチェックしたりすることができます。


( Xサーバーでサブドメインを作る )

●サーバー管理 → サーバーパネル → サブドメイン設定 )
→ ドメイン選択(メインドメイン)→ サブドメイン設定追加
→ サブドメイン名 → 確認画面へ進む → 追加する


( サブドメインへのWord Pressインストール )

サブドメインは追加したあと利用できるまでに最大1時間がかかる。

●「Word Press簡単インストール → ドメイン選択画面 → メインドメイン選択
→ Word Pressインストール → 設定対象ドメイン/メインドメイン
→ サイトURL → サブドメイン/フォルダに追加したサブドメインが表示されるまで待つ。
サブドメインへのWord Press簡単インストールは同じ。

5.設計図(テーマ)を選ぶ


( お勧めのテーマ )

設計図(テーマ)はさまざまなものが準備されています。
Word Press の公式サイトではいろいろなテーマが無料で用意されています。 → こちら

どれを選ぶかはお好み次第ですが、ほとんどのテーマは「お仕着せ」で小変更ができません。
また、外国で作られたものが多く、説明が外国語です。
しかも、その説明が殆どされていません。小変更ができないから説明の必要はないのでしょう。
「黙ってこの設計図を使えばよい。そうしたらこんな素敵な家になるゾ!」ということなのです。

お勧めのテーマは何といっても COCOON です。 → COCOON の特徴
個人の方が作成して無料公開しています。

COCOON ではいろいろな設定 ( 小変更 ) ができます。

フォント種類,大きさ,字間,行間,色、メインカラムの巾,サイドバーの巾など。
また、SEO設定,目次自動設定,adsenseコード自動貼り付け,サイドバー追従,メインカラム追従など。
通常は修正設計図 ( プラグイン ) でやらなければならない機能が付いています。

さらに、マニュアルが充実しています。 → COCOON マニュアル
質問も受けつけてくれます。フォーラムもあります。 → フォーラム

「HPB から Word Press 」なら、 COCOON でしょう。

この頁も COCOON で作っています。


( COCOON のインストール )

●cocoonをダウンロード → こちらから ( 親テーマと子テーマの両方をダウンロード )

・ダッシュボード → 外観 → テーマのアップロード → 下にあるZipファイルをドラッグ → 有効化 ( 子テーマだけ )

( 子テーマだけ有効にする )

これが初心者の間違うところ。そもそも初心者には「子テーマと親テーマの関係」が分からない。
あちらこちらのサイトに書いてあるのは
「カスタマイズは子テーマにする。親テーマがアップデートされてもカスタマイズは残る」。

どうも「メインは親テーマ、サブが子テーマ」
それでは「親テーマを有効にしておかなくてもいいの?」
子テーマと親テーマの機能的つながりが説明してないから、この疑問がつきまとう。
ネットには「知られていること」しか書いてない。「知らないこと、知りたいこと」にはだんまり。
案外、書いている本人も「知らない」のかも?ネットに書いてありませんからねぇ。

理屈は分かりませんが、「子テーマを有効+親テーマを有効にしない」が正解らしい。

この頁も親テーマから子テーマに切り換えました。
当然、設定はやり直さなければなりません。

( COCOON は2カラム )

この頁が2カラムです。

左側がメインカラム ( 主頁 ) 、右側がサイドバー。
上にヘッダーがあるので3分割、HPBのフレーム頁なら「3分割縦横-5」というタイプです。

サイドバー表示は「cocoon設定 → 全体」で、
「右にするのか左にするのか」、「表示するのかしないのか」、「どの頁に表示するのか」が選べます。
ヘッダーがスクロールに追従してくるようにも設定できます ( ヘッダー固定 )。

だだし、これらの 設定 で作る家の形式は一つだけ。
HPBなら、新しくフォルダを作れば別形式のフレーム頁を作れましたが、
Word Pressでは「ひとつのドメインに、ひとつのWord Press、ひとつの設計図、ひとつの外観」です。

6.とにかく頁を作ってみよう


( まずは出来上がりを見てみましょう )

●ダッシュボード → 固定頁 → 新規追加
※投稿頁は新しい順に表示される。
※固定頁は動かない。階層が作れる。
※HPBでの頁作成と同じなのが固定頁。

・タイトル → 任意の文言 ( Word Pressテスト頁 )

・その下の「+をクリック → 段落」 or「Enter」 → 新しい入力ブロックができる。

・既存のHPのプラウザ画面 ( ネットで表示される画面 ) をコピーして貼りつけ。

・更新 → プレビュー


これがあなたにとって初めてのWord Press頁です。
もちろん、サイドバー設定 ( ウイジェット設定 ) をしていないのでサイドバーは表示されません。


試しに、別テーマに切り換えてみましょう。

●ダッシュボード → 外観 → cocoon以外のテーマを有効化 → 新しく頁を開く

頁の体裁・外観が変わっているでしょう?これがWord Press マジック。
設計図を換えれば、すぐにその設計図通りの家に変わるのです。

ついでに、ブロックの上のツールを試してみましょう。
・Aの右にある「文字ツール」で、マーカーのアンダーラインが引けます。
・その右の「バッジツール」で文字全体をマーカーで覆います。

こういうところはHPBよりもおしゃれです。


( ブロック )

ブロックはさまざまな用途のための「まとまり」です。

「段落,見出し,頁区切り,画像,表,リスト」などさまざまなブロックが準備されています。
このブロックを組み合わせていけば体裁のよいページになるようになっています。
※最上段ツールバーの「+」/ブロックの追加 でさまざまなブロックが出てきます。

ブロックの上下移動もできます。

私は使ったことがありませんが、HPBにも「どこでも配置モード(SP)」があります。
それに、近いものでしょうか?


( ブロックの追加 )

・最上段ツールバーの「+」・ブロックの追加をクリック → 見出し,段落など用途にあったブロックを選ぶ。
・ブロックの下に出てくる「+」をクリックしても同じ。
・「enrter」キーを押しても 新しい段落ブロックができます。
・前の段落ブロックの終わりで「del」キーを押すと、次の段落ブロックが同じ段落ブロックになります。


※注意.「enter」と「shift+enter」

本来、
・「enter」は「改段落」 → <p>~</p>。
・「shift+enter」は「段落内改行」 → <br>

HPBでは文章作成に便利なようにこの操作が逆になっています。
・「enter」=「段落内改行」 → <br>
・「カーソル下げ」or「shift+enter」=「改段落」 → <p>~</p>

段落内改行のつもりで「enter」キーを押すと、新しいぷロックができてそこに移ってしまいます。
もちろん、元の段落の末尾で「del」を押せば、新しくできた段落は消え)ます(元の段落と一緒になる)。

当初はイライラすること間違いなしです。 → こちら

7.サイドバーを作る

( とにかくサイドバーを作る )

HPBでは右フレームに「サイト一覧やサイトの説明」などが書いてあります。
これを、そのまま右サイドバーに移します。
既存の頁をブラウザで表示させておいてください。

●ダッシュボード → 外観 → ウイジェット → アクセシビリティモードを有効にする。

・利用できるウイジェット → テキスト(任意のテキスト) → 追加
※アクセシビリティモードを有効にしていない場合は▼を押して → サイドバー
または、テキスト(任意のテキスト)をサイドバーまでドラッグ

・ウイジェットテキスト → タイトル/「サイト一覧」など任意
→ テキストブロックにブラウザで表示させた右フレームをコピーして貼りつけ

・サイドバー欄 → サイドバー → 位置/1 → ウイジェットを保存

・元の頁に戻って → プレビュー

これで、右サイドバーにHPBで作った既存頁と同じ右フレームができました。
※ウイジェットのテキストブロックでは文字色を設定できません。
   色設定をするときは貼りつけるテキストを通常の段落ブロックに貼りつけて編集してからウイジェットで貼りつける。

なお、 COCOON でサイドバー追従をする場合は、
・サイドバーに入っているテキスト → 編集ボタン → サイドバー/選択,サイドバー追従/1 → ウイジェットを保存
・これは、サイドバー頁がメインカラム頁より高さか小さい場合です。
・また、サイドバーに何も入っていないと、サイドバーが現れないので、
   何も書かないテキストをサイドバーに置くが必要です。
   利用できるウイジェット →    テキスト → 追加 → サイドバー/1

COCOON のように追従機能のないテーマでは次のプラグインを使うようです。

・Standard Widget Extensions
メインカラムIDとサイドバーIDの記載が必要。
これを、外観 → テーマエディタ → index.php と sidebar.php で探す。
サイドバーIDは見つかるが、メインカラムIDがみつからない。
ID設定がされていない場合は、設定書き込みが必要とか。「キャパ越え」

・Q2W3 Fixed Widget
これにはIDは不要。しかし、思ったように動かない。というより設定がチンプンカンプン。

これで、取り敢えずWord Pressの頁が出来上がりました。
次回は、もう少し体裁を自分好みにしてみましょう。


ネット専門の自転車総合通販サイト cyma電動・アシスト自転車
Daytoma DE01X,  Daytoma DE01S,  Daytoma DE01,  Daytoma DE02,  Daytoma DE03
benelli miniFold 16,  benelli miniFold 16 classic,  benelli ZERO N2.0 FAT,  benelli TAGETE CROSS
YAMAHA YPJ-C,  YAMAHA YPJ-R,  YAMAHA PAS CITY-X,  BRIDGESTONE TB1E,  その他いろいろ
「人力のみ、モーターのみで走れる」もの、「24㎞/h以上でモーターが止まらない」ものは
自転車ではなく原動機付き自転車です。必ず確認。 → こちら



タイトルとURLをコピーしました