WordPressでHPを作ってみる

Posted on | By slk15user001 | No comments

ここは、HTML/CSS/JavaScriptの練習 実践 雑多な記録４
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b4 からのリンク。

WordPressの基礎解説とデモサイト制作（連結講座#1）
https://www.youtube.com/watch?v=n_-hCvsyq3E
(たまたまYoutube見てたら、自分の練習場 https://oldcygwin.web.fc2.com/ もWP化したくなった)
ので、ホムペを作ってみる。(一応１からだから、テーマ自作！)
練習場
https://oldcygwin.fc2.page/ (FC2無料WP、キャッシュしてるので更新時はキャッシュ削除)
http://slack150memo.blog.example.com/homepage2/ (自分NotePCのローカルアドレス)
(homepageは既にPHPの練習 https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/PHP%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf で使った)

自分NotePCのWordPressにアクセスするために先にやっておく：
$ grep hosts /etc/nsswitch.conf
hosts: files dns
$ sudo ifconfig lo 127.0.0.1
$ sudo sh /etc/rc.d/rc.httpd start
$ sudo sh /etc/rc.d/rc.mysqld start

前回、localのWordPressにBlogを作ってトップページだけ入れてから無料サイト探しに行って。。
１年経ってしまった。プラグイン更新４件。loginIdとpassWdメモっておいてよかった。がしかし、
１つのwordpressで２つのサイトってできるのか？
１つのwordpress に Blog と HP を入れる、でググった：
https://www.xserver.ne.jp/blog/multiple-wordpress-install/
https://mixhost.jp/column/multi-site/
(localだしdomain増やすか。と思ったが、正式ではそうもいかない。localと言えど本番を意識
\した練習だし。最初はサブディレクトリで行くか。cp_-aでWPのディレクトリもろともコピー
\しようかと思ったが同じDBの同じRecordを指すからそうも行かない。またInstするか。Instに
\慣れるのも必要だろうし。レンタルサーバだと楽らしいが。楽だったかな?忘れた。そろそろ
\引越しもしないと)
(コピーしてwp-config.phpを変更すればDB対応もできるな、と思ったがやっぱり今回も１から
\行こう。学習順序が逆だった?。HPのテーマはBlogに流用できそうもないからそうでもないか。
\それでもInstよりコピペの方が圧倒的に楽だが)(以下でやってみたらそれほど楽でもなかった)
(テーマは無効化すればいいだけか、やっぱコピペで行くか)

$ sudo cp -a /myproj/slack150memo/blog /myproj/slack150memo/homepage2
$ sudo nvi /myproj/slack150memo/homepage2/wp-config.php (wordpress -> wordpress2 変更)
phpMyAdminでデータベース「wordpress2」をutf8mb4_general_ciで作成し「wordpress」の全テーブルを
コピーする。(構造とデータの両方をコピー、権限も制限もチェック入れない、全チェック無し)、ユーザ
アカウントのログイン情報をwordpress2に変更する(変更したらアカウントが追加された)。
$ sudo nvi /etc/httpd/extra/httpd-vhost.conf (以下を追加)
\<Directory “/myproj/slack150memo/homepage2”>
\ AllowOverride None
\ Options None
\ Require all granted
\</Directory>
\
何故かhomepage2ではなくblogの方を見に行ってしまう。よく見たらDBのレコードにもURLが入ってる
やないかい。さすがにDBの中までいじるよりは最初から入れるわ。というわけで上でやった事は
httpdの設定以外は全部削除して１からInst。
いや、phpMyAdminでDBの中を検索して１つづつ編集できるか。検索したらスゲー数が入っていた。
やっぱ１からInstの方が早い。
SQLコマンドとsedでも使えば効率的に変換できるんだろうけど、ここの主題じゃないので練習ネタ
として雑多な記録に取っておこう。と思ったが、
phpmyadmin レコード 検索 置換、でググった：
phpmyAdmin でSQL を実行して文字列を置換する方法
https://www.webantena.net/wordpress/phpmyadmin-update-set-replace/
(どうせ削除するならSQLコマンド練習してからにするかな。うまくいったらそのまま使うか)
\> update wp_options set option_value=replace(option_value, “slack150memo.blog.example.com/blog”, “slack150memo.blog.example.com/homepage2”);
\> update wp_options set option_value=replace(option_value, “myproj/slack150memo/blog”, “myproj/slack150memo/homepage2”);
\> update wp_posts set guid=replace(guid, “slack150memo.blog.example.com/blog”, “slack150memo.blog.example.com/homepage2”);
\> update wp_posts set guid=replace(guid, “myproj/slack150memo/blog”, “myproj/slack150memo/homepage2”);
\> update wp_users set user_url=replace(user_url, “slack150memo.blog.example.com/blog”, “slack150memo.blog.example.com/homepage2”);
\> update wp_users set user_url=replace(user_url, “myproj/slack150memo/blog”, “myproj/slack150memo/homepage2”);
(うまくいった。これ使おう)
以前作ったblogの投稿を削除、テーマは最初のやつ(鳥)に戻した。

ここからYoutubeの動画を参考に、HPのWP化を開始。
$ sudo mkdir /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin
$ sudo chown ore /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin (最終的にはapache)
$ mkdir /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/{img,js}
$ touch /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/{footer.php,front-page.php,functions.php,header.php,index.php,page.php,sidebar.php,single.php}
(index.htmlの中身をheader.php,footer.php,front-page.php,に割り振った。練習の都合上、index.html
\にもfooterを付けて見比べることにした。WPのテンプレートタグを入れた)
(後からfooterは外して非WPのHPと同じデザインにした)
\
壊れているテーマ
以下のテーマはインストール済みですが、足りない部分があります。
名前 説明
oldcygwin スタイルシートが見つかりません。
\
$ cp -a -i /myproj/oldcygwin/css/style.css /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/
(テーマを有効化できるようになったので有効化すると、HPが見れた)

テーマファイルエディタで開くと、
\
注意 !
WordPress ダッシュボードでテーマを直接編集しているようですが、これは推奨されていません。テーマを直接編集するとサイトが破損したり、将来の更新で変更が失われたりする可能性があります。
テーマの CSS 調整を超える変更が必要な場合は子テーマを作成してみましょう。
どうしても直接編集に進もうと決めた場合には、ファイルマネージャーを使って新しい名前でファイルのコピーを作成し、元のファイルを手放さないでください。 そのようにすれば、何かがうまく行かない場合でも、機能するバージョンのファイルを再び有効化できます。
戻る 理解しました
(fileの編集はテーマを無効化してemacsでやることにした(途中からメンドクサくなって無効化しないで
\編集した)。file権限はまだoreになっているので壊れるとは思えないが)

$ cp -a -i /myproj/oldcygwin/images/*.jpg /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/img/
$ cp -a -i /myproj/oldcygwin/images/*.svg /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/img/
$ cp -a -i /myproj/oldcygwin/images/*.png /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin/img/
\
画像まで表示できて気付いたが、背景がロゴやNEWS/MEMO/CONTACTの後ろまで回り込んでいて(背景の
divタグがこれらの親になっているから)、背景をheader.php,front-page.php,page.php,に分けれない。
凝ったデザインのせいだなぁ。むしろ(背景のタグを下にもってきて)分けてしまってコーポレート
サイトっぽくするのもアリか?。
と思ったが、margin-top: -10%; マイナスもできるのかー。divタグを下に持ってきても(子にしても)
背景は上の方に回り込ませることができる。

ここまでを、FC2の無料WPにUp：
$ zip –help (よく分からん)
linux zipコマンド 使い方、でググった：
https://webkaru.net/linux/zip-command/
$ cd /myproj/slack150memo/homepage2/wp-content/themes/
$ zip oldcygwin -r oldcygwin
wordpress 自作テーマ アップロード、でググった：
https://bizvektor.com/setting/wordpress/themeupload/
\
アップロードしたファイルからテーマをインストールしています: oldcygwin.zip
パッケージを展開しています…
テーマをインストールしています…
パッケージをインストールできませんでした。 style.css スタイルシートには有効なテーマヘッダーが含まれていません。
テーマのインストールに失敗しました。
\
参考書籍１の234pにあるサンプルコメントをテキトーに書き写して編集、再度Upしたらうまくいった。
(中古格安とはいえ、せっかく買った本なので少しでも役立ってもらう)

動画に習って最初は簡単な固定ページを作ってみる：
WPの機能を使うのだろうが、emacsでも編集したい(途中からテーマファイルエディタも使った)。
$ sudo chown -R apache /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin
$ sudo chmod -R g+rw,o+rw /myproj/slack150memo/homepage2/wp-content/themes/oldcygwin
\
固定ページのリンクをクリックしても404が出る。
パーマリンク カズタム構造：/index.php/%year%/%monthnum%/%day%/%postname%/
wordpress パーマリンク index.php、でググった：
https://enlico.net/blog/wordpress%E3%81%AE%E3%83%9…
\
\.htaccessを有効にすると以下が出た。
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at slack150memo@blog.example.com to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.
\
$ tail /var/log/httpd/slack150memo.blog.example.com-error_log
[Sat Apr 22 xx:yy:zz.zzzzzz 2023] [core:alert] [pid 16872:tid 139647170639424] [client 127.0.0.1:57032] /myproj/slack150memo/homepage2/.htaccess: Invalid command ‘[code’, perhaps misspelled or defined by a module not included in the server configuration
\
$ head .htaccess
\[code lang=”js”]DirectoryIndex index.php[/code]
(これを’#’でコメントアウトして以下に合わせたら表示できた)
https://nskw-style.com/2012/server/apache/htaccess-mod-rewrite-allow-override-all.html
\
表示できたが、PHPの書き方が悪いのか、get_header()の分しか表示してない。
スペルミスだった。やっぱデバッガが欲しいぞ、デバッガがー。仕方ないので慣れるまでVScodeで
編集するか、補完してくれそうだし。と思ったが補完されなかったのでヤメた。
vscode wordpress 補完、でググった：
https://digitor.jp/textbook/vscode-wordpress/
プラグインで補完できるのか。仕方ないのでVScodeをマジメに動かすか。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/VSCode

正式な固定ページを作る：
簡単な固定ページだと画像のPATHを入れれない。相対PATHを入れるにはPHPで書かなければならない。
(後から、画像のPATHを入れれないのは間違いで、絶対PATH(https://)で指定できることが分かった)
wordpress 固定ページにPHP記述、でググった：
https://wp-customize.net/wordpress/7719.html
プラグインではなく、参考書籍１を参考に、テンプレート階層(category-slug.php,category-
ID.php)を使う事にした。固定ページ用のテンプレート階層ファイル?、page-slug.phpが使えそ
うなのでこれを試す。page-news.php,page-memo.php,page-contact.php,を作る。
$ sudo cp -i oldcygwin/news.html slack150memo/homepage2/wp-content/themes/oldcygwin/page-news.php
$ sudo chown apache slack150memo/homepage2/wp-content/themes/oldcygwin/page-news.php
$ sudo chmod a+rw slack150memo/homepage2/wp-content/themes/oldcygwin/page-news.php
page-news.phpからheader,footerをPHPに入れ替えた。
wordpress 固定ページ テンプレート変更 スラッグ、でググった：
https://www.webdeki.com/column/7323/
(参考書籍１ではCSSのコメントは書いてるが、PHPのメタコメント? /** Template Name: page-slug ***/
\は見当たらない。これが無いとテンプレートメニューが出てこない)
固定ページnewsのテンプレートをデフォルトテンプレートからpage-newsに変更した。front-page.
php(元index.html)はPHPで書いてあり、footerを外せるので外した。元のindex.htmlと同じにした。
memoとcontactの画像はPHP化しないで絶対PATH(https://)で指定してみる事にした。必要なくPHPを
増やすとDBを使って効率化している意味が無くなる。
contactについて、DBからタグを読み込ませるとformの中に<br>が自動的に入ることが分かった。
<label for=”name”>お名前</label>
<br>
<input type=”text” id=”name” name=”your-name”>
このため、PHPで書かないと元のHTMLを忠実に再現できない。この件は一旦保留とした。
\
動画を参考に、newsのカテゴリーをDB化して投稿一覧(archive.php)として表示する。”投稿”をカスタ
マイズして投稿一覧にURLを付ける。wordpress add_filter、でググった：
https://www.webdesignleaves.com/pr/wp/wp_func_hook.html
(一度やってみたが、最終的には元に戻してカテゴリー分けした。<?php echo home_url(); ?>/cygwin
とやり、ディレクトリをカテゴリー指定しても、archive.phpはロードされてカテゴリー内の一覧が
表示できた。the_date()は表示されない場合があるのでヤメた)(2023.05)
\
動画を参考に、個別投稿(single.php)でコンテンツを表示するようにPHPを書いた。

残りの部分はこれまでの応用でできそうだからいいか。SPコーディングとかも、そのうち気が向いたら
またやるか。そろそろ別の事やるかな。

/*************************************************************************************/
EC-CUBEのLaravel化を行っていたら、大量にコードがあって、疲れてモチベ下がってしまった。(2025.03)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/EC%2dCUBE%20%bb%c8%a4%a4%ca%fd
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Symfony
ここでモチベ上げるために、個人事業主としての正式なホームページを作ろう。ガワだけでも。

1.ドメイン”何某.com”を取得する。
ネット上に看板を立てる場所を確保する。場所代がかかる。(客にもこう説明しよう)
ドメイン取得は最後とした。当面は非公開だし。と思ったが、LolipのWPのInst時に決まってないとダメ
らしい。それなりの最安ドメイン名の更新料金は安くても1680円/年かかる。

2.プロバイダから固定IP(オンプレミス)、または、レンタルサーバーを申し込む。
https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/%bc%ab%c1%b0%a1%a2IasS%a1%a2PasS%a1%a2SasS
https://seesaawiki.jp/lifewithslackzaurus/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac
(LAMP環境が使える格安レンタルサーバにする)

3.自分のコーポレートサイトを作る。
一般企業のWebサイト一式 (小規模事業者や個人事業者)
\1.トップページ
\2.サービス紹介 (＆料金表)
\3.特徴 or こだわり or 実績紹介
\4.会社概要
\5.お問い合わせフォーム
(WordPressに入れる事にした。Lolipでいいや)

4.WordPressでブログを設置して記事を書く(制作実績とSEO対策のため)
(ブログの前にホームページを作成する事にした)
WordPressにて、まだページを公開したくない場合の設定は、どうやるのか？ (->DeepSeek)
WordPressでページを公開したくない場合、以下の設定方法があります。目的に応じて選べます。
### 1. **下書き状態のまま保存**
\ – 編集画面右上の「**保存**」ボタン横の▼をクリック → 「**下書きとして保存**」を選択。
\ – **公開ステータス**: 「下書き」のままにすると非公開。
### 2. **公開予約（未来の日付を設定）**
\ – 編集画面右上の「**すぐに公開する**」をクリック。
\ – カレンダーで **未来の日時** を設定 → 「**予約**」をクリック。
\ – 指定日時まで非公開になります。
### 3. **非公開状態（プライベート）**
\ – 「**公開ステータス**」の「編集」をクリック → 「**非公開**」を選択。
\ – **注意**: この設定は投稿タイプやユーザーロールによって利用可否が異なります。
### 4. **パスワード保護**
\ – 「**公開ステータス**」の「編集」をクリック → 「**パスワード保護**」を選択。
\ – パスワードを知るユーザーのみアクセス可能。
### 5. **メンテナンスモードプラグインの利用**
\ – サイト全体を非公開にする場合（例: 「Coming Soon」プラグイン）。
\ – プラグイン検索で「**Maintenance Mode**」などをインストール。
### 補足
\- **プレビュー機能**: 「プレビュー」ボタンで公開前の確認が可能。
\- **ユーザーロール**: 「編集者」や「管理者」のみ下書きを閲覧可能にするには、プラグイン（例: 「Members」）で権限設定が必要な場合があります。
目的に合った方法をお選びください。特に「公開予約」は便利です。

現在はWordPress-6.2を使っているが、公開ステータスとは何処にあるのか？ (->DeepSeek)
WordPress 6.2 で「公開ステータス」を設定する場所は、**投稿やページの編集画面の右サイドバー**にあります。
### **具体的な手順**
1. **WordPressダッシュボード**にログイン
2. **投稿またはページを編集**（新規作成でも可）
3. **右サイドバーの「ステータスと公開状態」セクション**を確認
\ – ここに「**公開ステータス**」の設定があります。
### **公開ステータスの選択肢**
\- **公開**（デフォルト）→ 誰でも閲覧可能
\- **非公開** → ログインした管理者・編集者のみ閲覧可能
\- **パスワード保護** → パスワードを知っている人のみ閲覧可能
### **もし表示されない場合**
\- **右上の「歯車アイコン（設定）」**をクリック → 「**ステータスと公開状態**」にチェックが入っているか確認
\- **ユーザーの権限**が「投稿者」の場合は「非公開」オプションが表示されないことがあります（管理者・編集者権限が必要）
\**※ 補足**
\- 下書き保存や予約投稿は、同じセクションの「**公開日**を変更することで設定可能です。
これで非公開設定ができるはずです！ もし見つからない場合はスクリーンショットを共有いただければ、さらに詳しくご案内できます。

トップページは固定ページにも投稿ページにもしていないので、保護できないな。固定ページ化するか。最新
のWPは、6.7.2らしい。更新するかどうするか。先にHP作るか。WPはlocalに２つ入れているので、もう１つの
blogの方 https://seesaawiki.jp/lifewithslackzaurus_15_0/d/WordPress%a4%f2%bb%c8%a4%c3%a4%c6%a4%df%a4%eb を試しにVerUpしてみるか。
要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。
がまた出た。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/WordPress%a4%f2%c6%fe%a4%ec%a4%eb
$ sudo chown -R apache /myproj/slack150memo/blog (うまくいった)
データベースの更新が必要です
WordPress が更新されました。次に最後のステップとして、データベースを最新バージョンに更新する必要があります。
データベースの更新処理には少し時間がかかるかもしれません。しばらくお待ちください。
WordPress データベースを更新 (実行した。うまくいった)
Akismet Anti-Spam (5.1->5.3.7)、Classic Editor (1.6.3->1.6.7)、Twenty Twenty (2.2->2.8)、
Twenty Twenty-Five (1.0->1.1)、Twenty Twenty-One (1.8->2.4)、Twenty Twenty-Three (1.1->1.6)、
Twenty Twenty-Two (1.4->1.9) 更新した。Xeory Extension Ver0.5.1 はそのうち検討する。
blogの方が問題なくVerUpできたのでHPの方もVerUpした。

前回作った https://oldcygwin.fc2.page/ のローカル版を編集し自社HPを作って、保護付きでUpする。
https://seesaawiki.jp/fukugyo_sakusen/d/WordPress%a4%c7HP%a4%f2%ba%ee%a4%eb
(結局、HPはシンプルに行く事にし、WPはBlogに使う事にした。保護はApache設定で)

/*************************************************************************************/

 

参考情報：
MySQLで文字列を一括置換する方法
https://www.redwoodcity.jp/blog/blog-469/
特定の投稿を置換したい場合
UPDATE wp_posts SET post_content = REPLASE( post_content, ‘http://www.redwoodcity.jp’, ‘https://www.redwoodcity.jp’) WHERE post_id = 投稿ID;
WordPressのbloginfo()の一部廃止と非推奨に要注意！使用箇所をしっかり確認
https://whitebear-seo.co.jp/wordpress-bloginfo-deprecation/
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/bloginfo
WordPress固定ページが表示されない２つの要因と対処法 (wordpress 固定ページ 表示されない、ググった)
https://tomari30.com/hide/
絶対に失敗しないWordPressの移行手順！データベースからファイル一式をバックアップして移行する方法
(wordpress dbの内容 アップロード、でググった。簡単な固定ページでは量少ないのでコピペで登録)
https://recooord.org/wordpress-database-backup/
WordPressの固定ページに投稿ページの内容が表示されてしまう (wordpresss 投稿ページが固定ページになる、ググった)
https://teratail.com/questions/49993
https://galileo-venus.com/2021/11/17/211117_wp/ (wordpress 投稿一覧　表示する、ググった)

参考書籍：
WordPressユーザーのためのPHP入門 第3版 2019.08
https://books.mdn.co.jp/books/3219203008/
(持っているのは１つ前の物)

Category: Web系の練習

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です