SEO対策

EC-CUBEメールフォーム追加

EC-CUBEには問い合わせフォームがシステム組み込まれていますが、複数のメール問い合わせフォームがあると便利なので、別のメール問い合わせフォームを追加してみました。

今回の方法は、PHPでページ追加をしたり、既存のメールフォームにPHPタグの条件分岐などの方法でも可能なような気がしたのですが、
作業時間をなるべくかけないようにし、共通のクラスを利用はするものの管理しやすいプラグイン的なテンプレートを利用したほうが増改築もしやすいかと考えまして、
テンプレートファイルを追加する方向で、複数のメール問い合わせフォームを追加してみました。

まずはデフォルトのメールフォーム機能を調べていきます。

1⇒ お問い合わせフォームは公開フォルダ以下のcontact/index.phpが

2⇒ page_extends/contact/LC_Page_Contact_Ex.php がrequireされています

3⇒ data\class_extends\page_extends\contact\LC_Page_Contact_Ex.phpではpages/contact/LC_Page_Contact.phpがrequireされ

4⇒ data\class\pages\contact\LC_Page_Contact.phpのLC_Page_Contactクラスでは、メールフォーム内容の文字の変換、エラーチェック、メール送信が行われているようです

5⇒ data\Smarty\templates\default\contactではSmartyというPHPテンプレートエンジンが使用されているのでWEBデザイン側のHTMLソースコードは拡張子tplファイルで編集可能です

6⇒ 構造を追跡してみると/LC_Page_Contact.phpで

$this->tpl_mainpage = ‘contact/index.tpl’;
$this->tpl_title = ‘お問い合わせ(入力ページ)’;
$this->tpl_page_category = ‘contact’;

のようにお問い合わせページのテンプレートが参照されていることがわかります。

お問い合わせフォームは会員登録などと違ってデータベースとの連携がないので、項目をある程度自由に増減カスタマイズが可能です。ただしPHP記述の調整にはある程度の知識が必要です。

7⇒ 一連の問い合わせフォーム構造を『contact2』として複製する

注意するべき点は、LC_Page_Contact.phpの参照するところ『$this->tpl_mainpage = ‘contact/index.tpl’;』とページカテゴリー『$this->tpl_page_category = ‘contact’;』と、他のファイルで『contact』パスをcontact2にするだけでOKだと予想しました。

8⇒ そのまま構成構造を複製して、『EC-CUBE公開URL/contact2/index.php』のパス指定でお問い合わせフォームが表示されれば、あとはSmartyフォルダ内のテンプレートをカスタマイズして、confirm.tplとcomplete.tplも同様に編集し、パス指定を変更すれば完成です。

あとは項目をカスタマイズして、エラーチェックなどを必要に応じて記述を変更して、パスなどを変更したものに修正することで追加しすることができました。

同じ要領で自動返信のメールテンプレートを複製、編集することで新たなメールフォーム追加の完了です。

SEO対策

EC-CUBEお問い合わせフォーム編集

EC-CUBEのお問い合わせフォームのカスタマイズについて学習してみました。

今回はphpファイルをカスタマイズして、項目を追加して、さらにオリジナルデザインのHTMLソースを反映してみます。
カスタマイズの内容については、以下の2つになります。

・新規メールフォーム項目の追加
・メールフォームのデザインカスタマイズ

作業の流れはテスト環境で可能であればすべてのデザイン反映とメール送信まで確認して、問題がなければ公開サーバに反映します。
実際のカスタマイズはすべて自己責任において作業していますので了承ください。

【その1】お問い合わせフォームの構造を調べる

まずはEC-CUBEにデフォルトで用意されているお問い合わせフォームの構造がどうなっているのか調べました。

○お問い合わせフォームのパス

デフォルトではhtmlフォルダ内のcontact/index.phpが指定されている

⇒page_extends/contact/LC_Page_Contact_Ex.phpファイルがrequireされていました
⇒上のファイルでpages/contact/LC_Page_Contact.phpがコールされ
⇒LC_Page_Contact.phpを開くとお問い合わせ入力ページのソースを見つけることができました

【その2】LC_Page_Contact.php項目の追加

phpファイルを開くと、メールフォームの変換やエラーチェック、送信についての記述があります。

項目を追加するにあたっては、

56行目
//フォーム値変換用カラム
$arrConvertColumn = array(

165行目
//エラーチェック処理部
function lfErrorCheck($array) {

に項目を追加しました。コメント記載あるのでフォーム内容の変換と、必須項目かと入力内容値のチェックを行う場合はこちらも追加します。

【その3】HTMLページの追加

以下のSmartyフォルダ以下の箇所にデザインテンプレートファイルがあるのでHTML部分に項目を追加して、confirm.tpl/complete.tplも同じ項目の受け渡しHTMLソースを追加する。

data/Smarty/templates/default/contact/index.tpl

項目の追加ができたら、ブラウザでお問い合わせフォームページを開き画面を遷移させて確認。

【その4】デザイン組み込み

data/Smarty/templates/default/contact内のindex.tpl/fonfirm.tpl/complete.tplファイルのHTMLファイルからphpコードを反映させたいHTMLソースに組み込む

あとは同じ要領でブラウザで確認してみる。問題が内容であれば、公開サーバーにアップロード。

SEO対策

EC-CUBEのSEO対策/METAタグカスタマイズ

EC-CUBEのSEO対策で、METAタグのカスタマイズを考える場合、data/Smarty/templates/default/site_frame.tplのファイルが該当するファイルになります。

site_frame.tplではheadタグの他のカスタマイズも可能ですが、今回はmetaタグ属性descriptionとkeywordsのデフォルトの仕組みとカスタマイズを調べてみました。

EC-CUBEのページ毎のキーワードや詳細の設定は、管理画面の[基本情報管理]⇒[SEO管理]で各テンプレートごとに設定が可能です。

ここの各ページの項目が空の場合は、web上の実際のページでは空の状態となるので、できるだけ入力することが推奨されるでしょう。

■site_frame.tplのヘッダ部分、キーワードと詳細の記述

<meta name=”description” content=”<!–{$arrPageLayout.description|escape}–>” />
<meta name=”keywords” content=”<!–{$arrPageLayout.keyword|escape}–>” />

上記変数は管理画面のSEO管理で入力された値がページ毎に出力されるようになっています。

ただし、デフォルトではTOPページ、商品一覧ページ、商品詳細ページ、MYページの四種類のみです。

SEO管理のページを増やすという方法も一見考えられますが、これでは商品ごとにkeywordsやdescriptionが設定できないので、SEO対策的にはかなり不自由になります。

ですので、site_frame.tplをカスタマイズして、読み込まれるテンプレートごとにキーワードや詳細を指定する方法がよいと判断しました。
titleタグはページ名や商品名を取得しているので、方法としては、tplごとで条件を分岐させて、下記のtitleタグの記述を流用してみました。

【タイトルタグ部分の記述】
<title><!–{$arrSiteInfo.shop_name|escape}–>/<!–{$tpl_title|escape}–></title>

■EC-CUBEのSEO対策を考慮したheadタグ内のメタタグカスタマイズ手順

1.ページ階層を変数に代入して、デフォルトのdescriptionとkeywordsをif文で条件分岐させる
ページの数だけ指定して、商品一覧ページや商品詳細ページはそれぞれのページ情報を取得します

<!–{assign var=index value=”`$smarty.const.URL_DIR`index.php”}–>
<!–{assign var=list value=”`$smarty.const.URL_DIR`products/list.php”}–>
<!–{assign var=detail value=”`$smarty.const.URL_DIR`products/detail.php”}–>
<!–{assign var=mypage value=”`$smarty.const.URL_DIR`mypage/index.php”}–>

<!–{if $smarty.server.PHP_SELF==$index}–>
<meta name=”description” content=”<!–{$arrPageLayout.description|escape}–>” />
<meta name=”keywords” content=”<!–{$arrPageLayout.keyword|escape}–>” />

<!–{elseif $smarty.server.PHP_SELF==$list}–>
<meta name=”description” content=”<!–{$tpl_title|escape}–>の& lt;!–{$arrSearch.name|escape}–>の詳 細<!–{$arrSearch.category|escape}–>” />
<meta name=”keywords” content=”キーワード,<!–{$arrSearch.category|escape}–>,<!–{$arrSearch.name|escape}–>” />

<!–{elseif $smarty.server.PHP_SELF==$detail}–>
<meta name=”description” content=”<!–{$tpl_title|escape}–>の詳細” />
<meta name=”keywords” content=”キーワード,<!–{$arrProduct.name|escape}–>,<!–{$arrProduct.category|escape}–>” />

<!–{if $smarty.server.PHP_SELF==$mypage}–>
<meta name=”description” content=”<!–{$arrPageLayout.description|escape}–>” />
<meta name=”keywords” content=”<!–{$arrPageLayout.keyword|escape}–>” />

<!–{/if}–>

上記のようにTOPページとマイページはSEO管理からの内容を参照して、商品一覧ページは検索結果をもとに、商品詳細ページは商品名をもとにそれぞれMETAタグの内容を変更して出力することができました。

他にも個別のページが複数存在したので、それぞれ同じように分岐させて、それぞれの内容を記述しました。

なんとか各ページ毎でMETAタグの内容を変更することが確認できました。