管理人が自身の苦労話を語る。管理人が購入してみて良かったものを紹介。Pixabayからの画像)2021年5月末、自サイトをWordpress化しました。事前準備として「ZAMPP」を使ってサイトのWordpress化に挑戦し、更新が円滑にできる目途がつくまで勉強しました。プロも納品前のチェックに使っているソフトの集合体です。無料で使え、自分のPCをサーバー代わりにできます。サイト運営はできないので、レンタルサーバーと有料ドメインの取得はどうしても必要になります。いう事で5月後半になってからWordpressに対応した新規サーバー「ロリポップ!」に契約し直し、移籍処理をスタート。新ドメインも獲得し、5月末にアドレス変更(301リダイレクト)してWordpress化に成功しました。喜びもつかの間、悲劇が...!?それはまた、最後の方で詳しくお話しします(泣)本記事はWordPressシリーズ第1弾になります。「HTML/CSSでホームページ作成経験はあるけど、Wordpressは未経験」という人は、参考になるかもしれません。僕が勉強してみて分かりにくかった点を、かみ砕いて書いてみました。・・・ちょっと長くなっちゃいましたが(汗)「お前の理解力が無いだけだろ!」と突っ込まないように!!○Wordpress化への体験談(ほとんど失敗談!)○僕の超オリジナル勉強方法(参考になるか微妙・・・)○自作テーマへの挑戦(無料版の提供→有料版販売を目標)を紹介していきますので、今後とも『中年ニート在宅ワーク希望ブログ』をよろしくお願いいたします。世界シェアの3割以上を占めるということなので、以前からずっと気になっていました。面倒臭・・・難しそう!」と、何となく避けていました。○問い合わせフォームやショッピング機能を追加できる○自作テーマを作れるスキルがあれば、後々WEB制作の仕事受注やオリジナルテーマ販売などの足掛かりになるなど、メリットが多い様なのでチャレンジしました。○YouTubeチャンネル【ウェブ職TV/なかじ】で【もふもふ不動産】のもふさんがサイトを立ち上げた時のエピソードを紹介していた。「ブログ立ち上げ時にいきなり自作テーマに挑戦した」との事。僕もHTML/CSSをサイト運営できる程度は知っているので、刺激を受けて挑戦する気になった事もきっかけです。Pixabayからの画像)以下、自分が感じたプラスポイントです。HTMLをいじらなくてもHP更新ができるWordpressはソフトでもアプリでもなく、ブラウザ上で特殊なフォームに更新したい項目を打ち込む形式です。IDとパスワードを入れて、自分しか閲覧できないフォームだらけのサイトにログインするといった感じになります。打ち込んだ内容は一旦データベースとしてサーバーに保管され、それをPHPのコードを使ってサイトに表示させる(読み出す)というのがWordpressの仕組みです。「○○.php」というファイルを利用します。拡張子はphpですが、中身はまんまHTML言語です。HTML内にPHPコードが代入されている形です。HTMLが算数なら、PHPはXYや公式を使った中学以降の数学といった感じです。条件指定によって表示内容を替えるファイルなので、テンプレートファイルと呼ばれています。「データを引き出す」という言い回しが、最初はしっくりきませんでした。ちなみにWordPressでは「○○.html」は使いません。トップページとして必要だった「index.html」の代りに、「front‐page.php」「home.php」「index.php」などが使われます。自分でPHPコードを配置したり、HTML/CSSを追加・訂正したい場合は、結局PHPファイル自体の直接編集が必要になってきます。管理が楽ページ内の同一項目を一括りで管理できるヘッダー(タイトルや画像、各種設定)、ナビメニュー、フッターやサイドバーなど、全ページ共通の項目を1つのファイルで管理できます。HTMLをパーツ別に分割します。//フッターここまでHTMLだと1ファイル毎に変更する必要あり変更箇所が出た時、全ページ直す羽目に。これがしんどい!今まではインラインフレームで誤魔化していました。YouTube動画やTwitterなどのはめ込みに使うやつです。ページ内の固定スペースにページを埋め込む形なので、編集は1ページだけで事足ります。「インラインフレームにあてがったページのアクセス数が異常に跳ね上がる問題」(どうしてもページ移動する度にカウントされてしまう)が出てしまいます。サイトで一番アクセスの多いページが、フッターやサイドバーになってしまうという事です。これでは正直格好悪いですよね?投稿記事の管理がしやすい投稿記事が一覧で載っていて、情報確認と編集がすぐにできる。カテゴリー分けするだけで各一覧ページに記事を割り振れるループというPHPの機能を使えば、かなり楽に記事一覧を編集できます。PHPコードを更新したい箇所に組み込めば、編集画面で変更&追加できるカスタムフィールドというフォームを使えば、記事や記事一覧以外の箇所(トップ画像や更新日、広告など)の変更も可能です。プラグインを使えば色んな機能を追加できる○編集画面に色んな項目を追加(カスタマイズ)できる○HTML制作では設置できないオリジナルの問い合わせフォームや、ショッピング機能を設置できる○セキュリティ、サイトマップ登録などの面倒な処理をお任せできるただし、入れ過ぎるとサイトが重くなる問題発生。全てのファイルの名前を自由に決められたHTML時代とは違う。できないわけでもないです。(僕もまだまだ勉強中!)それぞれに役割や優先順位がある同一フォルダ内に以下のファイルが存在する場合、読み込み優先順位があります。○indexページ「archive.php」>「category.php」>「tag.php」この他にもゴチャゴチャいっぱいあります。詳しくは今後の記事で!ググって色々調べてみてもいいです。僕が作った&使っているテンプレートファイル○「front‐page.php」トップページ用。読み込み優先順位が一番なので採用。当サイトの場合、トップページのヘッダー・サイド・フッターの表示項目が他ページとやや違うので、このページのみ分割していない。当サイトでは、中身は空。使わなくても絶対必要。「style.css」と共にこれが無いとテーマとして認識しない。メインループを組み込み。<body>内<main></main>部分。メインループを組み込み。<body>内<main></main>部分。当サイトでは自己紹介・プライバシーポリシー・問い合わせフォームなどをこのファイル1つでまかなっている。ループ内に条件分岐を、条件分岐内に条件分岐を組み込むなど、メチャクチャ複雑にしてしまった...(汗)○「sidebar.php」<main>内の<aside></aside>部分。目次の様にスクロールしても固定追従させたい項目があるので、CSSのFlexboxを利用。1カラム(記事のみで左右に別の表示なし)なら別に無くてもいい。当サイトでは新着記事のサブループも組み込み。画面サイズが小さくなると非表示になるフレキシブル対応。○「footer.php」<footer></footer></body></html>の最後までを分割。スマホ表示時のみ新着記事のサブループ組み込み。フッター部分に表示させる項目が無くても、作っておいた方がいい。サイトは一覧をトップページに載せているので、この中身は空。(無くてもいいかな?)普通はメインループを組み込む。カテゴリー記事一覧用。メインループ組み込み。存在しないアドレスを打ち込み&リンク設定してしまった時に表示される。<body>内<main></main>部分。○「comments.php」コメントフォーム用にカスタマイズして設置。無くてもコメントフォーム自体は設置可能。「page‐[srug(任意の名称)].php」を作ったりする。「打ち込んだ情報はどこに保管されているんだ?」とWordPressのファイル内を探検しまくります。「サーバーにデータベースとして保管」するとの事ですが、FTPでは確認できないみたいです。(説明長っ!!)を使えば、打ち込んだデータを見る事ができます。「データが消えるのが心配」な方はご安心を!バックアップを取ったり(インポート)、復活させたり(エクスポート)できますので!ただし、操作を誤ると取り返しのつかない事になりますので、自己責任で!安全に事を進めたければ、バックアップ用のプラグインも(探せば)あります。アドレスの勝手(表示の規則性)が違うフォルダ階層と一致しないHTMLだと「(ドメイン名)/(フォルダ名)/(ファイル名)」がそのままアドレスになりますが、Wordpressはそうはならないです。「カスタム構造」から選択します。半角英数字や記号(ハイフン)を使います。日本語を指定すると、アドレスがクソ長い記号&数字の羅列に変換されてしまうので、注意!クソ長いファイル名やID表示がウザい投稿や固定ページには”ID”や”post_name”(アドレスにあてがわれる文字列)が自動的に割り振られます。後者は「クソ長い記号&数字の羅列」だったりします。そのまま使うのはしんどいと思います。『phpMyAdmin』をいじれば好きな番号や名称に変更できるので、ファイル名やアドレスの管理が楽になります。スクショでは、敢えて[h1見出し]の上にアドレスを赤字で表示させています。○[設定>パーマリンク設定>カスタム構造>/%category%/%postname%/]「(ドメイン名)/(カテゴリー名)/(記事番号)」という構成にしました。[例]https://sugihiro.jp.net/work/0100/正直「管理しやすい」という自分の都合を優先しています!SEO的には「(ドメイン名)/(英数字ハイフンで記事名に近い内容)」の方がいいと思います。編集メニューに項目を追加したりできる。テーマ開発の要になるファイル。上記で説明したテンプレートファイルとは別物。このファイルの内容がサイト上で表示される事はないです。知識があれば、プラグインを使わず自分でコードを打ち込んで機能を豊かにできます。これも一歩間違うと、サイトはおろか編集メニューまで表示されなくなる悲惨なエラーが出やすいです。事前にバックアップを取った上、自己責任でいじる事!サイトが開けないレベルのエラーが出ると、メールでお知らせが来ます。「クラシックエディター」(旧タイプ)とか「グーデンベルグ」(新タイプ)なるものがあります。使い勝手が違うので、古参の人は「クラシックエディーター派」が多いようですが、今後は「グーデンベルグ」がWordPressの主流になっていくようです。編集画面でどうにか完結できないか四苦八苦。「更新を楽にしたいのでPHPコードの組み込みに挑戦しているが、なかなか思い通りの挙動にならず、逆に超しんどい」という矛盾した状況に(泣)結局何とかなりましたけど。「category.php」内のHTMLを直接編集。・カスタムフィールドカスタムフィールドの内容は基本投稿・固定ページ表示の時しか反映できないでもPHPコードでページIDを指定すれば、どこのカスタムフィールド欄からでも編集可能らしい。○コメントフォームは無くてもいいが、こちらは必須。ないとコミュニケーションできないどころか、要望やご批判も聞けないので!○自作は挫折。サーバーによっては設定が変わるし、負担が大きいというので面倒。・Wordpress簡単セットアップ(ライトプラン~)。・データベースツール「phpMyAdmin」利用可。・ライト月額220円、ハイスピード月額550円。・Web系を中心とした案件情報。経緯は、ざっとですが以下の通り。途中何度もエラーを出したり、分からず停滞しまくっていました。「いらねー項目多くね?」という印象で、あまりそのまんまでは使いたくない感じ○理解できる部分だけ実践(パクり)したほうがいい○自分が使いたいもののみ使う。便利なコードを載せてくれているサイトもあるが、よく分からない物を使ってエラーが出てしまうと、どうしていいか分からなくなるので!○なかなか目当ての情報が見つからない(理解できないだけ?)が、根気よく探し続ける。同じ項目に数日ハマっても諦めない事!参考書を確認してみると、実は載っている場合も。1から読み進めるのではなく、落下傘方式で目次を見るより、索引(INDEX)を見てページを開く。実践したいものだけ勉強するので、飽きが来ない。諦めなければ確実に習得できる。僕も目的は「自サイトのWordpress化」だけだったので、ほとんど自作テーマの項目しか読んでいません。編集方法は自作テーマにPHPコードを組み込むうちに覚えました。Pixabayからの画像)Wordpressへのお引越しはつつがなく終了しました。・・・のはずだったのに、致命的なミスを犯してしまいました。301リダイレクトは以前のドメインのSEO評価(検索順位など)を引き継ぎますが、移行期間として3ヶ月は必要らしいです。僕の場合、その移行期間がわずか数日。最初の3日位はGoogleサーチコンソールでも評価を引き継いでいるのが確認できましたが、その後急にアクセス数が激減。旧ドメインを復活させてSEO評価を復活させる手もありましたが、年間3,000円弱の更新料だったのに復活させる場合は9,000円程かかるので諦めました。評価が振り出しに戻っても、今までのブログ収益が1,000円に満たない旧ドメインを復活させるメリットを感じなかったので。「評価が復活するまで数ヶ月掛かっても仕方がないかな」という事で、もしドメインを変更する場合は、旧ドメインの契約期間が最低3ヶ月は残った状態で行ないましょう。当ブログの記念すべき100記事目になります。【在宅ワークの道】パソコンでディスプレイ3つを使いこなす広告【ロリポップ!】ライト:月220円~+200GB+Wordpressスタンダード:月440円~+300GB+WP高速ハイスピード:月550円+400GB+WP最高速カテゴリーホーム当サイトのトップページ。つぶやき管理人のFC2無料ブログ。当サイトのメインテーマ。柔道三段の管理人が練習方法や技を解説。筋トレ自宅での筋トレ解説。