Zenn
Closed9

【WP：実装記録・初歩的なミス】

kohei nemawarikohei nemawari

お客様やり取り

①デザインの改修時
├　改修デザインを制作したら、それを先方へ提出。クライアントの意向を確認し、実装へ。
※修正し終わってから提出して、いや違うとなると努力が台無し。

②EC決済テストの必須
├　一度連携したことがあるからで、本番環境へ移行するのはダメ。必ず、一連の動作が確認できるかを確認。そのまま行うと、最悪損害賠償の問題になる

kohei nemawarikohei nemawari

実装関連

WP関連

カスタム投稿

①カスタムフィールドの値のスペルミス

カテゴリータブ
・AIが出した記述はbuttonだったが、実際はul / li を使用
┣ AIに全任せしようとした際に起きた失敗で、
①今後は実装してみたいサイトを見つける
②その参考サイトの構築内容を見てみる
https://suits.co.jp/

お問い合わせフォーム（Contact form7 関連）

①確認ページへのURL設定を、必死に別のフォームに設定していた
②Contact form7: 結局記述ミスだった。
┣ 関連しているプラグインを一度外す・無効化にする
┣ 一度入れ直して、作り直す

③G mail設定時の注意
├　Contact Form7の仕様上、G mailを「送信先」に設定するとメールが届かない
https://popo-design.net/wp-mail-smtp-wordpress/
https://hideharublog.com/contact-form7-not-sending-mail/

イベント詳細ページのタイトル名取得
①隠しフィールドを設定する Contact Form 7フォーム内に以下のように隠しフィールドを追加します。
plaintext

[hidden event_title]

②JavaScriptでページタイトルを取得して隠しフィールドにセット 次に、フォームのページに以下のJavaScriptを追加して、現在のページタイトルを隠しフィールドに挿入します。テーマのフッターやイベントページのテンプレートファイル（single-live_event.php）のフッター部分にスクリプトを追加してください。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ページのタイトルを取得して隠しフィールドにセット
    var eventTitle = document.title; // ページのタイトルを取得
    var eventTitleField = document.querySelector('input[name="event_title"]');
    if(eventTitleField) {
        eventTitleField.value = eventTitle;
    }
});
</script>

③メールテンプレートでのタイトル表示 メールテンプレート内で、以下のように隠しフィールド[event_title]を使ってイベントタイトルを表示します。

コードをコピーする
■ 参加イベント： [event_title]

メールフォームの条件分岐
Conditional Fields for Contact Form 7
https://wpmake.jp/contents/plugin/contact-form7/conditional-fields-cf7/

日付・時間の選択フォーム
プラグインなし
https://tkei-blog.com/2021/11/08/contactfrom7-date-and-time/#google_vignette

<div class="tr">
  <div class="td th"><span class="req">必須</span> 希望日時</div>
  <div class="td">
    第一希望日：[date* preferred-date-1]
    第一希望時間：[time preferred-time-1]

    第二希望日：[date preferred-date-2]
    第二希望時間：[time preferred-time-2]

    第三希望日：[date preferred-date-3]
    第三希望時間：[time preferred-time-3]
  </div>
</div>
kohei nemawarikohei nemawari

個別ページ・phpファイルの当て方

<?php
/*
下記がないとテンプレートに表示されず、記述が連携されない
Template Name: 
*/
?>
 
<?php get_header(); ?>
 
<?php get_footer(); ?>

kohei nemawarikohei nemawari

Sassファイルのコンパイルについて


対応：style.scssへ結合

  1. style.scssに_page3.scssをインポート
    以下のように、style.scssの末尾に_page3.scssをインポートします：

scss

@import '_page3.scss';
  1. style.scssをコンパイル
    ターミナルで以下のコマンドを実行します：

bash

sass style.scss style.css

これにより、style.scssがすべてのインポートを含む状態でコンパイルされます。style.cssにトップページや_page3.scssのスタイルが統合されるため、レイアウトが崩れる問題が解決するはずです。

package.jsonも修正

該当箇所がどこなのかをしっかり確認

package.jsonの修正方法
現在のスクリプト（修正前）： 現在、_page3.scssをコンパイルする設定になっているはずです：

json

"scripts": {
  "compile:sass": "sass _page3.scss style.css"
}

修正後のスクリプト： style.scssをコンパイルするように修正します：

json

"scripts": {
  "compile:sass": "sass style.scss style.css"
}

style.scssが全体のスタイルを管理するメインファイルで、そこに_page3.scssがインポートされている状態にします。
保存してスクリプトを実行： package.jsonを保存後、以下のコマンドで再度コンパイルします：

bash

npm run compile:sass

自動監視モードを有効にする： 変更をリアルタイムで反映させるには、以下を使用して監視モードを有効にします：

bash

sass --watch style.scss:style.css
kohei nemawarikohei nemawari

Local　既存サイトのトレース

  1. まずはいつも通り、テスト環境を作成

  2. 本番環境から、テーマをダウンロード
    ┣ クライアント対応の本番環境の場合は、お客様からサーバーへ接続するためのFTP情報（ホスト名、ユーザー名、パスワード）を教えてもらってください。
    ┣ /wp-content/themesをFTPにてダウンロード

  3. お客様のWordPress管理画面から記事をエクスポート
    ┣ ツール → エクスポート から必要なものをエクスポートしていきましょう。

  4. お客様からエクスポートした記事をローカル環境に入れていきます。
    ┣ ツール → インポート → WordPress「今すぐインストール」

https://haniwaman.com/wordpress-trace/

kohei nemawarikohei nemawari

12/10 FTP削除時注意、バックアップちゃんと残す

何かの操作ミスで、作ったテンプレートファイルが消えた
┣ ゴミ箱から戻したけど、作ったファイルが消えた。

手順

①以下のwp公式ページからダウンロードしたファイルをサーバー上にアップロード
https://ja.wordpress.org/download/

②以下のURLにアクセス
https://kn.sun-graphics.co.jp/wp-admin/install.php

③WPの初期設定画面が表示されるので、データベースの設定情報を入力。
あとはLocalで作成したテーマファイルをwp-contentフォルダにアップロードして
管理画面でテーマファイルを選択、でいけると思います。

  1. プレフィックスを設定
    • WordPressで複数のサイトを同じデータベースで管理するため、wp-config.phpファイル内のテーブルプレフィックスを設定します。
    編集箇所: 
$table_prefix = 'nissyoku_'; // プレフィックスを "nissyoku_" に変更

2. DB情報の確認
• すでに入力した DB_NAME, DB_USER, DB_PASSWORD, DB_HOST が正しいことを確認してください。
3. WordPressのインストールとセットアップ

  1. WordPressを専用ディレクトリにアップロード
    • 作成したフォルダ（例: nissyoku-wp）内に、WordPressファイルをすべてアップロードしてください。
  2. WordPressセットアップ画面にアクセス
    • ブラウザで https://<あなたのドメイン>/nissyoku-test/ にアクセスし、セットアップを進めてください。
    • セットアップの途中で、データベース接続情報を入力する画面が表示されるので、作成したDB情報とプレフィックスを入力します。
    4. XServerの特定プロパティを追加
    • プロパティ設定に関するヒント:
    • プロパティとは、XServerのディレクトリ内で特定のアクセス設定やドメイン設定を指す場合があります。
    • 必要であれば、XServerの「ドメイン設定」メニューで nissyoku-test に紐づけるディレクトリを正確に指定してください。
kohei nemawarikohei nemawari

第三者が作成したページ記述の注意

jsのエラーに関しては親ページ側で作成したコードに問題があり
こちらでは修正出来ない部分なので無視していただいて問題ありません。

修正する必要があるのは見え方（メニューを開いた時の背景）の部分のみで、
おそらく添付の赤枠で囲ったところを<div id="content">で囲っていただければ
本番環境と同じ状態になると思います。

kohei nemawarikohei nemawari

Basic認証の設定

◎このやり方自体は間違えていない
※.htaccessなければ、パーマリンクを更新してみる

AuthUserfile /home/xs617061/sun-graphics.co.jp/public_html/kn.sun-graphics.co.jp/nissyoku-test/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /nissyoku-test/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /nissyoku-test/index.php [L]
</IfModule>

# END WordPress

<?php
    echo __FILE__;
?>

https://www.jaskun.com/htaccess/basic-full/#google_vignette
https://tcd-theme.com/2021/09/wordpress-basic-authentication.html
https://www.luft.co.jp/cgi/htpasswd.php

kohei nemawarikohei nemawari

container の役割

•	主な目的:
•	コンテンツの中心揃えや最大幅の制限を行うために使います。
•	レスポンシブデザインにおいて、画面幅に応じて余白を調整したり、コンテンツの横幅を制限する役割を担います。
•	使用例:
•	ページ全体のレイアウトを整える。
•	中心揃えや左右の余白を設定する。
•	グリッドシステムのベースとして使う。

wrapper の役割

•	主な目的:
•	コンテンツのグループ化や内包に使います。
•	一つのまとまり（セクションやブロックなど）をラップ（包む）ために使用します。
•	具体的な位置調整や幅の制限はせず、主に構造を整理するための役割です。
•	使用例:
•	複数の要素をグループ化する。
•	背景色や装飾を付ける。
•	レイアウトの入れ子構造を作る。
このスクラップは3ヶ月前にクローズされました