EZ-SPARROW

カテゴリー: TECH NOTES

  • Woocommerceでメールのテンプレートを追加する方法

    Woocommerceには標準でメールテンプレートが10通用意されている。
    ※バージョンによって異なるため、要バージョン確認。

    Woocommerceのメールの特徴は、受注のステータスを変更したタイミングで発火し、自動で送信できるという点。
    ちなみに、標準のテンプレートで用意されているのは、注文時に管理者に送られる自動送信メールが1件、キャンセルのタイミングで管理者に送られるメールが1件、注文が失敗したタイミングで送信されるメールが1通。そして各タイミングで顧客に送られるメールが8通。

    メール機能を有効にチェックを入れなければ、送信のタイミングは自由に選ぶことができるため、基本、このデフォルトのメールテンプレートを修正すれば事足りるだろう。

    しかし、状況によっては新たなテンプレートをどうしても追加したいという場合がある。

    Woocommerceでプラグインを使わずにメールテンプレートを追加する方法

    こちらは以下英語のサイトだが詳しく解説されていたので参考にすると良い。

    https://www.skyverge.com/blog/how-to-add-a-custom-woocommerce-email/

    Woocommerceのメールテンプレートを追加できるプラグイン

    Woo Custom Emails

    上記のWP公式プラグインでWoocommerceにメールテンプレートを追加できる。

    ただし、発火のタイミングを選ぶことが必須となっているため、受注ステータスの変更時に送信するメール。というのが基本的な使い方だ。

    ※ステータスを両方同じステータスで指定すれば、自動発火を回避して使用することができるかも知れない。

  • WordPressで固定ページにログインフォームを設置する方法

    WordPressで固定ページにログインフォームを設置する方法を紹介したいと思う。ちなみに、ただ単に会員制サイトを作成したい場合は、プラグインがオススメだ。ログインフォームや登録画面を任意の固定ページに設置することができる。

    Theme My Login

    しかし状況によってはプラグインを使わずに特定のページにフォームを設置する必要がある場合もある。

    プラグインを使わずに固定ページにログインフォームを設置する方法

    今回のケースは、特定のサービスを提供するページにログインフォームを設置したいというケース。

    資料請求ページ等、通常のログインページとは別のページにログインフォームを設置したい、というような場合はプラグインを使わずにフォームを設置したいものだ。

    ログインフォームを設置する場合の注意点

    WordPress標準仕様に関して注意点がいくつかある。仕様として実現したいのは以下だ。

    1.  ログイン後、ログイン画面があった固定ページにとどまりたい
    2. ログイン失敗 ログインに失敗した場合にその固定ページにエラーメッセージを表示した

    上記の仕様を実現する方法を以下に紹介する。

    まずは基本的な点だが、念のため、

    ユーザーがログインしているかどうかで条件分岐する

    <?php if (current_user_can('administrator')) {  //管理人にのみ表示 ?>
<?php } else { //ログインしてないユーザー ?>
<?php } //分岐終了 ?>
<?php if ( is_user_logged_in() ) {  //ログインユーザー ?>
<?php } else { //ログインしてないユーザー ?>
<?php } //分岐終了 ?>

    固定ページにログインフォームを表示

    詳しくは公式ページ参照

    テンプレートタグ/wp login form

    <?php wp_login_form( $args ); ?>

    ログイン後、固定ページに留まり、ログイン失敗した場合はURLにクエリパラメータを付与

    以下をfunction.phpに挿入。URLにmessage=failed　というパラメータを付与できる。、

    add_action('wp_login_failed', 'ez_sparrow_login_failed');
function ez_sparrow_login_failed($username) {
    $page = $_SERVER['HTTP_REFERER'];
    $failed = '?message=failed';
    if(!empty($page) && !preg_match('/wp-admin/', $page)) {
        if(!preg_match('/message=failed/', $page)) {
            $page .= $failed;
        }
        wp_redirect($page);
    }
}

    固定ページ側でクエリパラメータに応じて条件分岐

    以下のコードで、クエリパラメータに応じて条件分岐させることができる。

    <?php if( $_GET ["message"] == "failed")  {
/* URLに?message=failedというパラメータが付与されていた場合 */ ?>
ここにエラーメッセージ
<?php } ?>

    [Googlead]

  • Really Simple CSV Importerでエクスポートする方法

    CSVデータで記事やカスタム投稿を一括登録できる「Really Simple CSV Importer」このプラグインのエクスポートバージョンがあれば何でもできてしまう気がするのだが、残念ながら「Really Simple CSV Exporter」は現在公開されていない。

    しかしながら、互換性があるとされている「WP CSV Exporter」というプラグインが開発されている。

    ただ、非常に残念なのはカスタム投稿に対応するバージョンは有料(980円)であること。

    全く良心的なお値段なのだが、プラグインを購入することに抵抗がある方のために、他のプラグインを駆使してCSV形式でエクスポートする方法をご紹介する。

    [Googlead]

    「WP CSV」と「Export to Text」を併用してエクスポート

    「Export to Text」はカスタム投稿にも対応したエクスポート用プラグイン。このプラグインでエクスポートしたファイルをGoogleスプレッドシートに読み込むとエクスポートが完了。

    ただし、この方法ではカスタムフィールドの値が1つのセルに結合されてしまい、調整が必要。

    そこで、「WP CSV」というプラグインでカスタムフィールドをエクスポート。

    設定は以下のように設定する。

    Enclosure:を”;”に変更
    フィールド名にcf_カスタムフィールド名

    以上、かなり荒業だが、近いうちに「Really Simple CSV Importer」に完全に対応したエクスポートプラグインが公開されることを願う。

  • スマホでプルダウンが拡大してしまう時の対処法

    スマホでプルダウンが拡大してしまう時の対処法

    スマホでプルダウンが拡大してしまう場合の対処法をメモ。

    単純にCSSでフォントを16px以上にすれば解決。

  • Bootstrapでnavbarの色を変更する方法

    Bootstrap3のnavbarの色を変更するには以下のCSS要素を変更する必要がある。

    .navbar-default {
  background-color: #9b59b6;
  border-color: #8e44ad;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ecdbff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ecdbff;
  background-color: #8e44ad;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ecdbff;
  background-color: #8e44ad;
}
.navbar-default .navbar-toggle {
  border-color: #8e44ad;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #8e44ad;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ecdbff;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #8e44ad;
  }
}

    上記のコードを全て修正するのは結構な手間だが、これらを簡単に変更できるツールがある。

    [Googlead]

    Bootstrapでnavbarの色を変更できるツール

    TWBSColor

    カラーパレットから色を選ぶだけで必要なCSSを書き出してくれる。

    bootstrapのnabbarの色を変更

    [Googlead]

  • アンカーリンク（ページ内リンク）の位置がずれる場合の対処法

    [Googlead]

    ページ内でリンクを貼る場合、

    <a id=”#linktarget”>

    <h2>ここに飛ばしたいコンテンツ</h2>

    などとしていた方もいるだろう。

    これは、<h2 id=#linktarget”>ここに飛ばしたいコンテンツ</h2>

    と記述したほうがスマートだ。

    さて、今回はこの<h2>にmargin-top:40px;を指定した時にアンカーリンクの位置がずれてしまうケースをメモしておく。

    Google　Chromeではページ内リンクの解釈が異なる

    Firefoxではページ内リンクの40pxマージン計算に入れて位置を算出するが、Google Chromeではmarginが考慮されていない。それでページ内リンクのmarginを無視した位置に飛ばしてしまうのでだ。

    解決策は至って単純、

    [Googlead]

    <div id=#linktarget">
<h2>ここに飛ばしたいコンテンツ</h2>

    上記のようにmarginを指定したい要素を、divで囲って、divにidをふれば解消される。

  • ショップサーブでmeta要素を使ってドメイン移行リダイレクト検証結果

    以前「ショップサーブで検索順位を下げずにリダイレクトする方法」という記事を書いたが、

    今回はその続編で、meta要素に記述してリダイレクト（ページランクや順位を継承して）がスムーズにいくか検証してみた。

    [Googlead]

    前回の記事でもふれたが、サイトのurlを変える場合はhtaccessに記述するやり方が一般的だ。

    いわゆる301リダイレクトで恒久的にページが移行したことをgoogleロボットに教えることができる。

    ただ、ショップサーブをはじめ、htaccessの使用を制限されているレンタルサーバの場合では

    この方法は使えない。

    結論からいくと、ショップサーブの場合はカテゴリページ（またはグループページ）のコンテンツ内に

    meta要素で0秒後に移行URLへ飛ばす。といった記述をする方法しかない。

    自動移動のやり方はこちらが参考になる

    ただ、この方法ではせっかく上位表示されているページの評価を継承することができない場合がある。

    そこで、今回は検証ページとしてGoogle件数6000万で現状3位のページをショップサーブA店舗から

    ショップサーブB店舗へ移行する作業を行い検証してみた。

    結果は以下。日付は移行日からの日数、

      1日-3日 4日-9日 10日～
    旧ページ 3位 4位 –
    新ページ – 3位 3位

    [Googlead]

    まとめると、移行後4日目に移行先のページが旧ページの上位にたち、

    10日～旧ページがランク外。

    つまり、移行は無事成功した。

    執筆時点でも順位に変動はない。

    下記は今回旧ページに挿入したmetaタグ。

    <meta http-equiv="refresh" content="0;URL=移行後のURL">

     

  • お客様の声をjqueryで動的に配置するスクリプト

     

    お客様の声などをjqueryで動的に表示することで活気あるサイトを演出できる。

    jqueryを使ってtwitterのように、ある一定のタイミングでスライドさせていくスクリプトが公開されていたので

    紹介したいと思う。

    これを利用すればサイトトップページで動的にお客様の声を表示することができる。

    詳細は下記のページで丁寧に解説されているので参考にすると良い。

    http://www.webopixel.net/javascript/289.html

  • ショップサーブで検索順位を下げずにリダイレクトする方法

     ショップサーブはSEOに強いという話を何度かしているが

    あるキーワードで上位表示されているカテゴリーページを

    順位を下げずに別のサイトに引っ越したいという案件があった。

    ※注意：トップページでも自作ページでも商品ページでもなくカテゴリーページである。

    さて、リダイレクトさせる場合、いくつか方法があるが

    サーバー側に制限がない場合.htaccessファイルを使用する方法が一般的だ。

    ショップサーブのサーバーではリダイレクトの際に.htaccessが使用可能か

    オンラインサポートを調べてみた。

    すると下のような回答を見つけた。

    「.htaccess」ファイルの設置は可能ですが、管理画面を操作することにより、上書きされてしまう場合がございます。

    これは、まさか、「お店を更新」をする度に上書きされてしまうという事なのか・・・

    恐る恐る電話で問い合わせてみると

    そうではなくて、 .htaccessは次の3つのタイミングのみ上書きされるとの事。

    1. シークレットサービス機能を使用したとき
    2. 「URLの設定」を変更したとき
    3. 「開店・閉店の切り替え」を行ったとき

    つまり上の3つの機能を使用する時だけ気をつけておいて、.htaccessを再アップロードすれば良いのだ。

    ※ちなみに1のシークレットサービスとはパスワード付のシークレットページを作成する機能の事。

    ショップサーブでリダイレクトを設定する

    URLの移行に関する設定方法は下のページが分かり易く解説しているので参考にすると良い。

    http://allabout.co.jp/gm/gc/23770/

    上記のサイトではリダイレクトを行う３種類の方法

    1. 「.htaccessを使う方法」
    2. 「HTMLのmeta要素を使う方法」
    3. 「JavaScriptを使う方法」

    が紹介されている。

    今回のケースではカテゴリーページAから別サイトのカテゴリーページBに移行させる

    というケースだったので

    2のHTMLのmeta要素を使って ページAで「引っ越します」のメッセージを表示し、5秒後にページBへリダイレクトさせる

    という方法がユーザー目線からは自然な方法だが・・・

    この方法はGoogleが推奨している方法とは異なるのだ。

     

    検索エンジンの結果で表示されるページの URL を変更する必要がある場合は、サーバー サイドの 301 リダイレクトを使用することをおすすめします。これは、ユーザーや検索エンジンが正しいページにたどり着くことを保証する最善の方法です。ステータス コード 301 は、ページが別の場所に完全に移転したことを意味します。

    ページの URL の変更と 301 リダイレクトの使用

    metaを使ったリダイレクトは一説によれば悪質なSEO対策としてスパム扱いされる場合もあるとの事。

    今回は「検索順位を下げずに移行する」という点を考慮して「.htaccessを使う方法」を採用してみる事にした。

    ショップサーブで.htaccessでリダイレクトさせる

    作業手順は以下の通り。

    ページAをBに移行させる まずはAをBに移行させる

    この際、コンテンツをいじる必要があったとしても

    とりあえず順位が安定するまでは全く同じ内容で移行しておくのが無難だろう。

    FTPで.htaccessをダウンロード

    現在の.htaccessファイルをショップサーブ側からダウンロードする

    .htaccessに追記

    下記コードをテキストエディタで追記。

    ※.htaccessを編集するエディタは注意が必要だ

    RewriteEngine On
RewriteRule^対象ページのURL$ 移転後のURL [R=301,L]

    さて、これで通常の作業は終了だが

    ページをリロードして、確認してみると・・・・

    なぜかリダイレクトされない。

    ショップサーブのサポートに真相を確認

    再び電話でサポートに確認してみると、

    カテゴリーページ（ドメイン/SHOP/)内は htaccessがきかない設定になっているとの事。

    ・・・・・・・

    ・・・・・・

    ・・・・

    ・・・

    というわけで、

    「カテゴリーページを.htaccessでリダイレクトさせる事は出来ない」のだ。

    もう一度強調しておく。

    ショップサーブで

    「カテゴリーページを.htaccessでリダイレクトさせる事は出来ない」のだ。

    HTMLのmeta refreshを使用してリダイレクトさせる

    結局選択の余地がないので下記コードを「カテゴリ専用ヘッダ」に入力する

    <meta http-equiv="refresh" content="秒; url=リダイレクト先URL">

    秒の所を0にする事でyahooは301リダイレクトとして判断してくれる。

    ただし、前述のようにGoogleはmeta refreshでのリダイレクトを公には推奨していない。

    大量のページでこれを使用するとスパム扱いの可能性もあるので用注意だ。

    ショップサーブでリダイレクトする際のまとめ

    • カテゴリーページ以外なら.htaccessが使える
    • 商品ページであれば独自ページURL(標準機能)を商品追加時に指定
    • .htaccessを使う際には更新時に注意が必要

  • ショップサーブのCSSをカスタマイズする際のポイント

    Eストアーのショップサーブ のCSSをカスタマイズする際のポイントをご紹介します。ほとんど備忘録です。

    CSSが格納されている場所

    ショップサーブ の管理画面から登録したCSSはhpgen>HPB>theme>css>default.cssに格納されます。

    FTPサーバから直接アップする事も可能ですが、管理画面から更新作業をする度にショップサーブ 側に保存されていたファイルが上書きされますので、CSSを編集したい場合は、default内をコピーして別のファイルで編集するが効率的です。

    既存のテーマを適当に選んで、そのテーマを修正していくのが速いでしょう。

    カートのCSSを修正する際の注意点

    ショップサーブ のテーマの最大の弱点は、カートのページにサイドナビゲーションがなく、レイアウトが崩れるところにある。

    今時テーブルで組まれているので将来的には解消されることと思いますが、現時点ではカートのページだけで適用されるCSSを作成することは必須です。

    背景画像等で枠を付けている場合等はカートのページのみ背景画像を消す等の選択もあるでしょう。

    また、カートで使用される画像は全てショップサーブ 指定のディレクトリに格納する必要がある。この点はサポートフォーラム等を参照。

    ※カートはIEセキュリティ保護のため、１.パスの変更と、2.default内にcssを記述　する事が必要となります。