Webサイト全体から特定のキーワードを抽出する

LinuxコマンドでWebサイト全体から特定のキーワードを抽出する方法の備忘録。

LinuxコマンドでWebサイト全体から特定のキーワードを抽出する方法の備忘録。

使用環境

CMS EC-CUBE 2.13.5
PC環境  Windows
SSH接続ソフト Tera Term

1.SSH接続で検索対象のディレクトリ階層まで移動

Tera Term上で検索を掛けたいディレクトリまで移動する。
今回はtemplatesディレクトリが検索対象

2.grep コマンドでフォルダ内を横断検索

キーワードを”手数料”として、templatesフォルダ以下ファイル内の文言を検索

grep -r "手数料" templates/*
// コマンド|オプション|"検索ワード"|検索対象ファイル(フォルダ)

オプション【- r】を付けてフォルダ内を横断検索

実行結果

以上

【おまけ】コマンド履歴からキーワードを抽出する

historyコマンドの実行結果にgrepを掛ける

history|grep "mysql"
// history|grep "検索ワード"
実行結果対象のキーワードが含まれるコマンド履歴の一覧を表示

 

メンテナンス画像への切り替えについて

サイトをリニューアルする際、テスト環境から公開環境へ最新コンテンツを移行するまでの間、公開環境をメンテナンス状態にしておく必要があります。
今回はメンテナンス対応時の大まかな手順について共有します。

サイトをリニューアルする際、テスト環境から公開環境へ最新コンテンツを移行するまでの間、公開環境をメンテナンス状態にしておく必要があります。
今回はメンテナンス対応時の大まかな手順について共有します。


1.メンテナンス画像を作成

まずメンテナンス画像を用意します。
①会社のロゴ、②メンテナンス時間、③告知文 を記載します。
自分は万が一メンテナンス時間内に作業が完了しなかった時を考慮して「時間が前後する場合も~」といった文言も添えてます。
また、メンテナンス中はフォームからのお問い合わせが出来ないので電話番号も載せておくと親切かと思います。

2.メンテナンスページを作成

メンテナンス告知用のページ「maintenance.html」を作成します。

<style>
.maintenance img {
  display: block;
  margin: 0 auto;
}
</style>
<div class="maintenance">
  <img src="" />
</div>

メンテナンス画像を外部ツールでBase64エンコードした後、上記imgタグのsrc属性に貼付けます。これで画像の元データは不要となります。

<style>
.maintenance img {
  display: block;
  margin: 0 auto;
}
</style>
<div class="maintenance">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANS******" />
</div>

3.「.htaccess」の編集

ルートディレクトリ直下の.htaccessを編集して、「maintenance.html以外のページにアクセスがあったらmaintenance.htmlへリダイレクトする」様に設定します。

#メンテナンス対応
ErrorDocument 503 /maintenance.html
 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/maintenance.html
    RewriteRule ^.*$ - [R=503,L]
</IfModule>
これで「maintenance.html」と「.htaccess」をサーバーにアップしたらメンテナンス状態になります。

4.特定のIPアドレスからのアクセスを許可する

いざメンテナンス状態になった時に、制作会社側とクライアント側で事前に公開環境の確認をする必要があります。その場合特定のIPアドレスからのアクセスを許可する様にhtaccessに以下を記載します。

RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX

「XXX.XX.XXX.XXX」はアクセスを許可したいIPになります。
自分のIPアドレスはここから確認出来ます。

最終的に.htaccessは以下のようになります。

#メンテナンス対応
ErrorDocument 503 /maintenance.html
 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/maintenance.html
    RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX
    RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX
    RewriteRule ^.*$ - [R=503,L]
</IfModule>
)

.htaccessの詳細については下記サイトの解説が参考になるかと思います。

WordPressカスタムヘッダの画像をカテゴリ別に出し分ける

Wordpressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。

WordPressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。

使用環境

WordPress  5.2.2
親テーマ Twenty Sixteen
子テーマ カスタマイズの対象となるテーマ

1.管理画面からヘッダー画像を登録

ヘッダー画像を管理画面外観カスタマイズヘッダー画像 からカテゴリ用の画像を登録します。この時現在のヘッダー画像はそのままにしておきます。

2.ファイル側に画像出し分けの条件分岐タグを追加する

親テーマのheader.phpをカスタマイズの対象となる子テーマにコピーしてきます。Twenty Sixteenでは98行目辺りにヘッダー画像表示の記載がありました。

<div class="header-image">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
</div><!-- .header-image -->

 

上記コードを条件分岐タグのelse: 以降に配置します。今回はカテゴリーに属しているかどうかで判断するのでin_category()を使用します。

// 記事がニュースカテゴリに属している場合
<?php if (in_category('news')) :
  // ニュースカテゴリ用のヘッダ画像を表示(true)
<?php else: ?>
  // 現在のヘッダーとして設定してある画像を表示(false)
<?php endif; ?>

3.デフォルトのコードを修正する

デフォルトのコードを修正しtrue部分に当て込んでいきます。
まず、imgタグのsrc属性で使われている header_image() 関数は
外観>カスタマイズ>ヘッダー画像>現在のヘッダー の画像URLを取得しています。

// 関数
header_image();
// 出力結果
http://サイトURL/wp/wp-content/uploads/2019/07/ファイル名.jpg

その他のアップロード済み画像(カテゴリA、カテゴリB)のURLは
管理画面>メディアから取得します。
取得したURLは変数$image_urlとして代入しておきます。

// アップロード画像URLを変数に代入
$image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
<img src="<?php echo $image_url; ?>" ・・・

次に、imgタグのsrcset属性で使われているget_custom_header()関数の中身を確認します。

// 関数
get_custom_header(); 
// print_rでの出力結果
(
  [url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [thumbnail_url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [width] => 1200
  [height] => 306 
  [ video ] =>
  [attachment_id] => 126
)

この中で attachment_id をカテゴリAヘッダー画像用に差し替えたいので、attachment_url_to_postid()関数を使って先述の$image_urlからIDを取得します。

// カスタムヘッダーに登録している画像のURLから添付IDを取得
$attachment_id = attachment_url_to_postid( $image_url );
<img ・・・ srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>"

imgタグの修正はこれで終わりにします、次にヘッダ画像のリンク先を変更します。

4.ヘッダ画像のリンクをカテゴリ一覧に変更する

デフォルトのままだとリンク先がトップページになっているので、カテゴリ一覧に遷移する様修正します。

// お知らせカテゴリーの ID を取得
$category_id = get_cat_ID( 'news' );
// カテゴリーIDから URL を取得
$category_link = get_category_link( $category_id ); ?>
<a href="<?php echo esc_url( $category_link ); ?>" title="お知らせカテゴリ一覧">

 

5.修正後のソースコード

修正後のコードは下記の通りになりました。

<div class="header-image">
    <?php if (in_category('news')) :
        // カスタムヘッダーに登録している画像のURLから添付IDを取得
        $image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
        $attachment_id = attachment_url_to_postid( $image_url );
        // 指定したカテゴリーの ID を取得
        $category_id = get_cat_ID( 'news' );
        // このカテゴリーの URL を取得
        $category_link = get_category_link( $category_id ); ?>
        <a href="<?php echo esc_url( $category_link ); ?>" title="お知らせ一覧">
        <img src="<?php echo $image_url; ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>					
    <?php else: ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
    <?php endif; ?>
</div><!-- .header-image -->

他に良いやり方があればコメント頂けると嬉しいです。

WordPressカスタムフィールドを追加して商品一覧の価格を表示する

Wordpressサイトで商品一覧ページを作る時、商品名説明文価格は表示したいです。

デフォルトでは商品名・説明文記事タイトル・本文抜粋に置き換えられますが、価格はカスタムフィールドを追加する必要があります。

使い方はWordPress Codex に掲載があるので、今回は実際にやった手順を共有します。

WordPressサイトで商品一覧ページを作る時、商品名説明文価格は表示したいです。

デフォルトでは商品名・説明文記事タイトル・本文抜粋に置き換えられますが、価格はカスタムフィールドを追加する必要があります。

使い方はWordPress Codex に掲載があるので、今回は実際にやった手順を共有します。

使用環境

WordPress  5.2.2

1.管理画面からカスタムフィールドを追加

カスタムフィールドはデフォルトで非表示になっているので、投稿編集ページの表示オプションからカスタムフィールドオンにします。

投稿編集画面下部にカスタムフィールドが出現するので新規追加をクリック

項目名・表示する値を登録

項目名は価格にしました。

管理画面の設定はこれで終わりです。次はテンプレートファイルに関数を記載します。

2.フロントで表示するためにファイル側を設定する

get_post_meta() 関数ループ内に記載してカスタムフィールドの中身(メタデータ)を取得します、$key項目名を代入しておきます。

$key="価格";
$price = get_post_meta($post->ID, $key, true);

カスタムフィールドの値があった時のみHTMLタグも含めて表示したいので条件分岐タグ内で$price変数を出力します。

$key="価格";
$price = get_post_meta($post->ID, $key, true);
if ( $price ) : ?>
    <span class="price"><?php echo $price.'円'; ?></span>
<?php endif;?>

これだけです、他に良いやり方があれば教えて頂けると嬉しいです。

Contact form7 からの問い合わせメールが迷惑フォルダに入る

お問合せフォームプラグイン Contact form7 を入れた後、Gmail宛の問い合わせメールが迷惑フォルダに入る事に気付きました。

原因としてはContact form7側で設定した送信元と、実際に送信されるメールサーバーが異なっていた為、Gmail側でスパム判定されてしまったようです。

WP Mail SMTP プラグインを試したら無事届いたので設定手順を共有します。

お問合せフォームプラグイン Contact form7 を入れた後、Gmail宛の問い合わせメールが迷惑フォルダに入る事に気付きました。

原因としてはContact form7側で設定した送信元と、実際に送信されるメールサーバーが異なっていた為、Gmail側でスパム判定されてしまったようです。

WP Mail SMTP プラグインを試したら無事届いたので設定手順を共有します。

使用環境

サーバー CPIサーバー
メールサーバー G-suite

1.WP Mail SMTPの設定

プラグインをインストール後、設定画面で送信者名を入力

次に、使用するメーラーGmailを選択します。

メールが送信されなかった時に消失するのを防ぐ為、返信先項目はチェックを入れておきます。

ここで、GmailのクライアントIDクライアントシークレットの入力項目が出てきます。
この項目に必要な情報を用意するにあたり、web application を作成するためのGoogle account を使用する必要があります。

2.Google Account での Web application の作成

新しいタブで sign into your Gmail account and access Gmail’s application registrationを開きます。
WP Mail SMTPの設定画面には後ほど戻ってくるので開いたままにしておきます。

リンクを開き、Gmail accountにログインしたら”APIを有効にする – Google API Console”画面に遷移します。

ドロップダウンにデフォルトで「プロジェクトの作成」が選択されているので、そのまま続行ボタンをクリックします。

このボタンをクリックすると、Googleから”APIは有効になっています”と言われます。設定ページに進むために、認証情報に進むボタンをクリックします。

次のページに於いて、Googleが認証することの手助けとなる、いくつかの質問を受けます。

  • 使用するAPI →Gmail API
  • APIを呼び出す場所 →ウェブブラウザ(Javascript)
  • アクセスするデータの種類 →ユーザーデータ

これらの質問に上記内容で回答し、必要な認証情報ボタンをクリックします。

このボタンをクリックすると、OAuth 同意画面の設定画面がポップアップで開くので同意画面を設定をクリックして進みます。

この時新しいタブ プロジェクトへの認証情報の追加 が開きますが、後で設定するのでそのままにしておきます。

今回はG suiteを使用しており、@gmail.comのメールアカウントを使用していないので下記の画面に遷移します。アプリケーションの種類内部を選択し、アプリケーション名はあなたのサイト名を入力します。

次に、承認済みドメインの項目までスキップして、サイトのドメインを入力します。この時 http:// 又は https://は含めません。

その下の[アプリケーション ホームページ] リンク、[アプリケーション プライバシー ポリシー] リンク、[アプリケーション利用規約](省略可) リンクの項目は、サイトURLを入力します。

入力が出来たら保存します。

この時認証情報画面に遷移するので、一旦そのままにしておき、以前開かれた別のタブプロジェクトへの認証情報の追加に切り替えます。

名前は任意で入力し、承認済みのJavaScript生成元はサイトのURLを入力します。

承認済みのリダイレクト URI欄には、WP MAIL SMTPの設定画面のAuthorized redirect URI からコピーして貼付けて、更新ボタンをクリックします。

これで、クライアントIDを作成できます。

3.認証とメール送信テスト

作成したクライアントIDとクライアントシークレットは編集ボタンから確認できます。

WordPressのWP MAIL SMTP設定画面にもどり、クライアントid・クライアントシークレットを入力して、Authorization項目のボタンをクリックします。

Googleのログイン画面に遷移するので、ログインして同意すれば認証完了です。

最後に、WP MAIL SMTPの設定画面からメール送信が問題ないかテストできます。

他の対策も知ってるよって方いたら教えて頂けると嬉しいです。