クリエイターと名乗ってみた。
以前「ECCUBEのお問い合わせフォームの複製／別作成 増やし方」で紹介もしましたが。
WordPressも実装しているのであればコチラのContactform7を入れたいくらいです。
主な機能は下記。
基本的なお問い合わせフォーム機能はもちろんのこと。
メール形式チェック
入力必須項目の実装
CAPTCHA（画像認証）
ファイル添付機能
などなど、カスタマイズ性には特化しているかと思います。
なのですが・・・ファーストサーバーで文字化けする・・・orz
サイドバーに物件を表示させようと「トップ物件表示」を弄っていましたが挫折。
面倒なので以前使っていたポストタイプを指定して表示させるコードを改変。
色んな所からコードを寄せ集め直して作りましたとさ。。。
（まぁ不動産系に係らずサイドバーに新着表示させられるんだけどねw）
[php]
<div class="newentry">
<?php $loop = new WP_Query( array( ‘post_type’ => ‘fudo’, ‘posts_per_page’ => 1 ) ); ?>
<?php query_posts( array( ‘post_type’ => ‘fudo’, ‘posts_per_page’ => 1 ) ); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(180,180), array(‘class’ => ‘left’)); ?>
</a>
<div class="title">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php echo mb_substr(get_the_title(),0, 1); ?>
</a><br />
<?php echo mb_substr(get_the_excerpt(),0, 50); ?><br />
<a href="<?php the_permalink();?>">
…続きを読む
</a>
</div>
<?php endwhile; wp_reset_query();?>
<?php endif; wp_reset_query();?>
</div>
[/php]
以下備忘録。
スマートロールオーバーのご紹介。 同じフォルダに画像を二つ用意します。 １つはマウスホバーの画像{XXX_on.jpg}と通常時の{XXX_off.jpg} 後は下記をJSとしてヘッドなり外部JSとしてと見込ませればオンオフの切り替えが出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } |
[php]
#globalnavi {
margin: 0;
padding: 0;
list-style-type: none; /* リストマークの削除 */
width: 172px;
padding: 145px 0px 0px 0px;
}
#globalnavi li {
width: 172px;
height: 32px;
margin: 0;
padding: 0;
display: inline;
}
#globalnavi a {
text-indent: -9999px; /* テキストを隠す */
text-decoration: none;
display: block;
width: 172px;
height: 32px; /* リンク領域を広げる */
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}
#menu1 a { background-position: 0 0; } /* 表示画像の位置を指定 */
#menu2 a { background-position: 0 -29px; }
#menu3 a { background-position: 0 -58px; }
#menu4 a { background-position: 0 -86px; }
#menu5 a { background-position: 0 -116px; }
#menu6 a { background-position: 0 -145px; }
#menu7 a { background-position: 0 -174px; }
#menu8 a { background-position: 0 -200px; }
#menu9 a { background-position: 0 -230px; }
#menu10 a { background-position: 0 -258px; }
#menu11 a { background-position: 0 -288px; }
#menu12 a { background-position: 0 -317px; }
#menu13 a { background-position: 0 -348px; }
#globalnavi a:hover {
text-decoration: none;
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}
/* 入れ替え画像の位置を指定 */
#menu1 a:hover { background-position: -172px 0; }
#menu2 a:hover { background-position: -172px -29px; }
#menu3 a:hover { background-position: -172px -54px; }
#menu4 a:hover{ background-position: -172px -83px; }
#menu5 a:hover{ background-position: -172px -114px; }
#menu6 a:hover{ background-position: -172px -145px; }
#menu7 a:hover{ background-position: -172px -174px; }
#menu8 a:hover{ background-position: -172px -200px; }
#menu9 a:hover{ background-position: -172px -230px; }
#menu10 a:hover{ background-position: -172px -259px; }
#menu11 a:hover{ background-position: -172px -288px; }
#menu12 a:hover{ background-position: -172px -317px; }
#menu13 a:hover{ background-position: -172px -348px; }
[/php]
まず管理画面にログインして、デザイン管理>PC>レイアウト設定 から、ページを新規入力します。
URLは review_list.php として、以下のコードを貼り付けて保存します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="customervoice_area"> <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="この商品に対するお客様の声" /></h2> <!--{if count($arrReview) > 0}--> <ul> <!--{section name=cnt loop=$arrReview}--> <li> <!--{$arrReview[cnt].title|h}--> <!--{$arrReview[cnt].create_date|sfDispDBDate:false}--> 投稿者：<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}--> おすすめレベル：<span class="recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span> <!--{$arrReview[cnt].comment|h|nl2br}--> </li> <!--{/section}--></ul> <!--{/if}--></div> |
次に、html/user_data/review_list.php を開いて、次のように修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!--?php require_once '../require.php'; require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php'; /** * ユーザーカスタマイズ用のページクラス * * 管理画面から自動生成される * * @package Page */ class LC_Page_User extends LC_Page_Ex { /** * Page を初期化する. * * @return void */ function init() { parent::init(); $masterData = new SC_DB_MasterData_Ex(); $this--->arrRECOMMEND = $masterData->getMasterData("mtb_recommend"); } /** * Page のプロセス. * * @return void */ function process() { parent::process(); $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { //レビュー情報の取得 $this->arrReview = $this->lfGetReviewData(); } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } //商品ごとのレビュー情報を取得する function lfGetReviewData() { $objQuery =& SC_Query_Ex::getSingletonInstance(); //商品ごとのレビュー情報を取得する $col = "t1.create_date, t1.reviewer_url, t1.reviewer_name, t1.recommend_level, t1.title, t1.comment, t2.product_id, t2.name, t2.main_list_image"; $from = "dtb_review as t1 left join dtb_products as t2 using (product_id)"; $where = "t1.del_flg = 0 AND t1.status = 1 ORDER BY t1.create_date DESC"; $arrReview = $objQuery->select($col, $from, $where, $arrval); return $arrReview; } } $objPage = new LC_Page_User(); register_shutdown_function(array($objPage, 'destroy')); $objPage->init(); $objPage->process(); |
data/Smarty/templates/default/user_data/review_list.tpl を以下のように変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="この商品に対するお客様の声" /></h2> <!--{if count($arrReview) > 0}--> <ul> <!--{section name=cnt loop=$arrReview}--> <li> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrReview[cnt].product_id|u}-->"> <img src="{$smarty.const.ROOT_URLPATH}resize_image.php?image={$arrReview[cnt].main_list_image|sfNoImageMainList|h}&width=40&height=40" alt="<!--{$arrReview[cnt].name|h}-->" /></a> <a href="<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrReview[cnt].product_id|u}-->"><!--{$arrReview[cnt].name|h}--></a> <!--{$arrReview[cnt].title|h}--> <!--{$arrReview[cnt].create_date|sfDispDBDate:false}--> 投稿者：<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}--> おすすめレベル：<span class="recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span> <!--{$arrReview[cnt].comment|h|nl2br}--> </li> <!--{/section}--></ul> <!--{/if}--> |
以上。
ブロック化は以下。
デザイン管理>PC>ブロックの設定新規ブロックで下記を作成。
ブロック名：お客様の声一覧
ファイル名：review_list_bloc
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="customervoice_area"> <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="お客様の声一覧" /></h2> <!--{if count($arrReview) > 0}--> <ul> <!--{section name=cnt loop=$arrReview}--> <li> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrReview[cnt].product_id|u}-->"> <img src="{$smarty.const.ROOT_URLPATH}resize_image.php?image={$arrReview[cnt].main_list_image|sfNoImageMainList|h}&width=40&height=40" alt="<!--{$arrReview[cnt].name|h}-->" /></a> <a href="<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrReview[cnt].product_id|u}-->"><!--{$arrReview[cnt].name|h}--></a> <!--{$arrReview[cnt].title|h}--> <!--{$arrReview[cnt].create_date|sfDispDBDate:false}--> 投稿者：<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}--> おすすめレベル：<span class="recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span> <!--{$arrReview[cnt].comment|h|nl2br}--> </li> <!--{/section}--></ul> <!--{/if}--></div> |
トップページのブロックで表示する場合、html直下のindex.php下記のような感じで書き換え。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
require_once './require.php'; require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Index_Ex.php'; // }}} // {{{ generate page //$objPage = new LC_Page_Index_Ex(); //register_shutdown_function(array($objPage, "destroy")); //$objPage->init(); //$objPage->process(); /** * ユーザーカスタマイズ用のページクラス * * 管理画面から自動生成される * * @package Page */ class LC_Page_User extends LC_Page_Ex { /** * Page を初期化する. * * @return void */ function init() { parent::init(); $masterData = new SC_DB_MasterData_Ex(); $this->arrRECOMMEND = $masterData->getMasterData("mtb_recommend"); } /** * Page のプロセス. * * @return void */ function process() { parent::process(); $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { //レビュー情報の取得 $this->arrReview = $this->lfGetReviewData(); } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } //商品ごとのレビュー情報を取得する function lfGetReviewData() { $objQuery =& SC_Query_Ex::getSingletonInstance(); //商品ごとのレビュー情報を取得する $col = "t1.create_date, t1.reviewer_url, t1.reviewer_name, t1.recommend_level, t1.title, t1.comment, t2.product_id, t2.name, t2.main_list_image"; $from = "dtb_review as t1 left join dtb_products as t2 using (product_id)"; $where = "t1.del_flg = 0 AND t1.status = 1 ORDER BY t1.create_date DESC"; $arrReview = $objQuery->select($col, $from, $where, $arrval); return $arrReview; } } $objPage = new LC_Page_User(); register_shutdown_function(array($objPage, 'destroy')); $objPage->init(); $objPage->process(); |
基本的には同じ作業。
画像とかは適当にかえましょう。
（レビュー自体未投稿だと空欄なので適当に用意しておきましょう。）
コメントなしでもサブ画像のみ表示する方法
商品詳細のページでサブ画像だけ増やしたいときにこれを使用。
最終的には縦並びになるのでCSSで横に並ぶようにしました。
templates/default/products/details.tpl
下記コードのサブタイトルとサブ画像を切り離します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!--▼サブコメント--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != ""}--> <div class="sub_area clearfix"> <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3> <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> <!--▼サブ画像--> <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key]|strlen >= 1}--> <div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div> <div class="subphotoimg"> <!--{if $arrProduct[$lkey]|strlen >= 1}--> <a class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" /> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a> <span class="mini"> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 画像を拡大する</a> </span> <!--{/if}--></div> <!--{else}--> <!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--> <!--{/if}--> <!--▲サブ画像--> </div> <!--{/if}--> <!--{/section}--> <!--▲サブコメント--> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--▼サブコメント--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != ""}--> <div class="sub_area clearfix"> <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3> <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> <!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--> </div> <!--{/if}--> <!--{/section}--> <!--▲サブコメント--> |
上記コードを下記に丸ごと書き換え。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--▼サブ画像--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key]|strlen >= 1}--> <div class="subphotoimg"> <!--{if $arrProduct[$lkey]|strlen >= 1}--> <a class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" /> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a> <span class="mini"> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 画像を拡大する</a> </span> <!--{/if}--></div> <!--{/if}--> <!--{/section}--> <!--▲サブ画像--> |
多分コレで出来るはず。
（スマフォ版もコレで行けました。）
ただ縦に並ぶだけなので、CSSのdiv.subphotoimgを下記コードに書き換え。
|
1 2 3 4 |
div.subphotoimg { float: right; text-align: right; } |
ちなみにfloat：right；なので右揃え。
通常はleftでもいいかと思います。
なので、コメント欄の後ろのほうに登録した写真が左に来て、上位のコメントにつけた画像が右に来る可能性あり。
あと表示位置をメイン写真の真下に持ってこれれば最高、しかもクリックしたらそれもLightBox風にできぬだろうか・・・
ヘッダーにカテゴリを表示します。
CSSハックでドロップダウンメニューにも対応。
一応管理画面からだけで設定可能なシンプル版です。 “ヘッダーにカテゴリを表示：ドロップダウンメニュー(CSS)” の続きを読む