商品カテゴリーを全部表示(開いたままにする)2.11.4

カテゴリーブロックを以下のように書き換えるだけ。

要は元のカテゴリーブロックを下記のように修正。

上記の※印の3行を削除。

スタイルシート H1、P タグの後、改行させない css html

H1などのHタグや、Pタグの後、改行させないようにするには、inline を使いインライン要素にします。

.ex

 ↓
タイトル Hタグの後でも、 Pタグの後でも、改行されない。

商品一覧を3列のカラム(column)表示 / 横型商品一覧の導入

user_date/packages/default/css/common.css内の記述を変更
(contents.cssの可能性あり)

↓に変更。

下記はカラムへの回り込み禁則処理
(商品が1つの場合や価格順・新着順のソートバー回り込み禁則)

common.cssの中(100行目あたり)に追記

下層コンテンツあたりに追記

多分以上で出来るが、商品名や文字のボリュームで個々のheightがバラバラになることがあります。
なので、「heightLine.js」jQuery等でそろえること。
(面倒であればCSSでdiv.list_areaとdiv.list_area h3 の heightを強制固定)

買い物かごの表記は下記ファイルの200行目前後。
今回は消去しました。
template/default/products/list.php

2012年1月24日 加筆

商品一覧ブロックを作る 2.11.X

html/frontparts/bloc/product_list.php を新規作成

data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List_Ex.php を新規作成

[php]
<?php

// {{{ requires
require_once(CLASS_EX_REALDIR . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_Bloc_Product_List_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();

?>
[/php]

data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List.php を新規作成

[php highlight=”44″]
<?php

// {{{ requires
require_once CLASS_REALDIR . ‘pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php’;

/**
* Product_List のページクラス.
*
* @package Page
*/
class LC_Page_FrontParts_Bloc_Product_List extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$bloc_file = ‘product_list.tpl’;
$this->setTplMainpage($bloc_file);
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
if (defined("MOBILE_SITE") && MOBILE_SITE) {
$objView = new SC_MobileView();
} else {
$objView = new SC_SiteView();
}

$objQuery = new SC_Query_Ex();
$objProduct = new SC_Product_Ex();

//$objQuery->setLimitOffset(10);
//$objQuery->setOrder("update_date desc");
$this->arrProducts = $objProduct->lists($objQuery);

$objView->assignobj($this);
$objView->display($this->tpl_mainpage);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}

?>
[/php]

$this->arrProducts = $objProduct->lists(&$objQuery);の44行目で過去のバージョン2.11辺りのQueryだとlists(&$objQuery);の表記でしたが&無しで記述。 $this->arrProducts = $objProduct->lists($objQuery); data/Smarty/templates/default/frontparts/bloc/product_list.tpl を新規作成

[php]
<!–{if count($arrProducts) > 0}–>
<div class="bloc_outer clearfix">
<div id="productlist_area">
<h2>商品一覧リスト</h2>
<div class="bloc_body clearfix">
<!–{foreach from=$arrProducts item=arrProduct}–>
<div class="product_item clearfix">
<div class="productImage">
<a href="<!–{$smarty.const.P_DETAIL_URLPATH}–><!–{$arrProduct.product_id|u}–>"><img src="<!–{$smarty.const.ROOT_URLPATH}–>resize_image.php?image=<!–{$arrProduct.main_list_image|sfNoImageMainList|h}–>&width=40&height=40" alt="<!–{$arrProduct.name|h}–>" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!–{$smarty.const.P_DETAIL_URLPATH}–><!–{$arrProduct.product_id|u}–>"><!–{$arrProduct.name|h}–></a>
</h3>
<p class="sale_price">
<span class="price"><!–{$arrProduct.price02_min|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}–> 円</span>
</p>
</div>
</div>
</dl>
<div class="clear"></div>
<!–{/foreach}–>
</div>
</div>
</div>
<!–{/if}–>
[/php]

スタイルシート追記

[css]
<style type="text/css">
div#productlist_area h2 {
background-color:#de5e17;
text-align:center;
color:#fff;
padding:7px 0 7px 0;
}
div#productlist_area div.productImage {
float:left;
width:40px;
padding:0 8px 0 0;
}
div#productlist_area div.productContents {
float:left;
width:100px;
}
div#productlist_area div.product_item {
padding:5px 0 5px 5px;
}
</style>
[/css]

データベースに新規ブロック情報を登録

[php]
insert into dtb_bloc values(10,10,’product_list’,’product_list.tpl’,’product_list’,now(),now(),’frontparts/bloc/product_list.php’,0);
[/php]

Warningが表示されたので掲示板等参考に下記を実行。

[php highlight=”7″]
<?php

// {{{ requires
require_once CLASS_REALDIR . ‘pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php’;
////中略////

$this->arrProducts = $objProduct->lists(&$objQuery);

$objView->assignobj($this);
$objView->display($this->tpl_mainpage);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}

?>
[/php]

data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List.phpの部分で、本文44行目(上記7行目) $this->arrProducts = $objProduct->lists(&$objQuery); $this->arrProducts = $objProduct->lists($objQuery);

としたら表示が消えました。

eccube2.11 インストール方法 (ver2.11.4)

eccube2.11.4 インストール方法 一回やりましたがもう既に忘れたのでもう一度トライするところから。

まず、データベースを構築するところからですが user_eccube と適当に設定。

空のDBを作成したら、 EC-CUBE Version 2.11.4(zip)をダウンロード。

この時、不具合修正ファイルの最新版も同時にダウンロード。

上記のうち、ECサイトそして機能するのに必要なデータは「data」「html」の2つのフォルダだけなので他は無視。

セットアップ前に、不具合修正ファイル内にある「data」「html」をeccube-2.11.4の中に入れて上書きしてください。

“eccube2.11 インストール方法 (ver2.11.4)” の続きを読む

smartRollover

スマートロールオーバーのご紹介。 同じフォルダに画像を二つ用意します。 1つはマウスホバーの画像{XXX_on.jpg}と通常時の{XXX_off.jpg} 後は下記をJSとしてヘッドなり外部JSとしてと見込ませればオンオフの切り替えが出来ます。

WordPressプラグイン。めんどくさいのでこれだけは入れてみたw3種の神器w

面倒なので、3つくらいしかプラグイン選びたくないですwっていう人に最適。
事実、別のワードプレスに入れてみたのが以下3個のみw

Simple Tags
面倒なので紹介すらここではしませんw
http://wordpress.siyouyo.com/plugin/1330/
上記「WordPressの使い方」でうまい具合に紹介しています。
いいとこポイントも3点のみ紹介します。
1.タグ管理が楽になる
2.本文を読み取って自動的にタグを入れてくれる
3.過去の記事にもタグ付してくれたw

2.3.は非常にめんどくさがり屋さんな自分には助かりましたw

Akismet
初期設定でインストールされているプラグインです。
面倒なスパム野郎はこれで撃退できます。有効化すればいいのですが、面倒なポイントはAPIKEYを取得しないといけないことくらいですねw
いいとこポイントではなく面倒なポイント3点のみ紹介w
1.APIKEYを取得しないといけない(取得は簡単ですが)
2.最初からインストールされてるのに有効化されてないw
3.Akismetという名前だけじゃスパムを消してくれるプラグインかわからないw

特にプラグインの名前・・・意味が分からず・・・過去にもこのプラグイン使ってましたが、全然思い出す気にもならないネーミングw
メンドクサイ名前だw(非常に有効活用させていただいてますが)

Google Analytics Dashboard
ダッシュボードにアナリティクスを表示してくれる奴ですねw
面倒なので敢えて紹介はしませんが楽なポイント3点紹介しますぉw
1.いちいちGoogleAnalityicsにアクセスしなくていいw
2.設定も楽
3.こんなプラグイン探してたw

結局紹介自体面倒なので適当ですが、めんどくさがり屋な自分にとって入れられるのは3つくらいなもので、Akismetに至ってはスパムがかなり入ってから入れたくらいですw
本気出せば結構選べるのですが、FTP使わずにインストールできる機能も備わっていながらそれでも面倒なのでプライベートで作るBlogに至っては超適当にやってますwなのでインストールしてもプラグインすら設定してない状態もありマスが、今日作ったブログで入れたのは上記の3点くらいなものですw
他にも魅力的なプラグインがいろんなところで紹介されているので漁ってみるのもいいですねw

例えば下記とか好きですw
2011年版!絶対にインストールしたいWORDPRESSプラグイン45個

CSSでメニューボタンの画像をホバーさせる

[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]

EC-CUBE 動的ページを静的ページ(静的URL)にする

なぜ静的URLにするのかというと・・・

GoogleやYahoo! などの検索の場合、動的URLでは、一つのページとみなしてしまいます。 (まぁ最近じゃ?がついていようとインデックスしてくれるみたいですが) ちなみに動的URLとは下記のように?が入るURLです。 http://サーバ名/ec-cube/html/products/detail.php?product_id=xxこちらですと、検索するにあたって、detail.phpのファイルとみなされていまい、 1ページしかインデックスされません。

ですので、各ページごとにインデックスされるように、 http://サーバ名/ec-cube/html/products/detail/xx

とします。これが静的URLです。 実際にページは存在していませんが、 検索ロボットに存在しているように見せることができます。

1. パラメータを変える。

まず、 システム設定>パラメータ設定より以下を変更います。 パラメータ:LIST_P_HTML 変更前:URL_DIR . “products/list-p” 変更後:URL_DIR . “products/list/” パラメータ:DETAIL_P_HTML変更前:URL_DIR . “products/detail.php?product_id=”変更後:URL_DIR . “products/detail/”

2. .htaccsessファイルをhtml/products/以下にに配置します。 そのファイルに下記の内容を追加します。 RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^detail/([0-9]+)+ detail.php?product_id=$1 [L] RewriteRule ^list/([0-9]+)+ list.php?category_id=$1 [L]

※.htaccsessは、html/ 内にありますので、それをコピーして設置すると楽です。

3.管理画面>デザイン管理>ブロック編集>カテゴリを開き46行目あたりのソースを変更

こちらはカテゴリのリンクの変更です。

変更前:products/list.php?category_id= 変更後:products/list/

4.管理画面>デザイン管理>ページ詳細設定>商品詳細ページのソースを変更

商品詳細のページのリンクが静的ページにするために、パス( / )を切った関係で、階層が一つ多くなってしまいました。

変更箇所は、 内の合計6つ変更です。

変更前:./ 変更後:../  ※2階層上へ送っている

他、動作には関係ありませんが、こちらも変更をオススメ、

 

変更前:products/list.php?category_id= 変更後:products/list/

これで、変更完了です。 各種エディターを使って、コピペして、コマンド+Fで所定の箇所を探してみてください。

WordPress 管理画面のレイアウト崩れ

管理画面のレイアウト崩れが。。

define( ‘CONCATENATE_SCRIPTS’, false );
ただしこれは根本的な解決策ではありません。

define( ‘CONCATENATE_SCRIPTS’, false ); というコードを wp-config.php の最初に追加する。
WordPress のスピードは遅くなるので、数日後に削除してまたテストしてみること。
(これを行うことで古いネットワークキャッシュを削除できます)

ということなので、一定期間経過後コードを削除してレイアウトの状態を見てみることにしました。
が、1週間強経過しているにもかかわらず、状態は変わらずです。
もうしばらく様子を見ようとも思ったのですが、原因が分からないのも気持ちが悪いので、
再度ぐーぐる先生に聞いてみました。

WordPressをCORESERVERに設置する|pc.casey.jp

今まで色々いじくっているので、.htaccessの内容がおかしくなっていることでしょう。
まずはこちらの記事の「.htaccessファイルを設置」する項目を実践しました。

WordPressルートフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php

wp-contentフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php

wp-adminフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php

それから「管理画面のレイアウトが崩れる=CSSが読み込まれていない」ということで、
納得のいく説明をされていた以下のブログも参考にさせてもらいました。

WordPress 2.9.1 自動アップデート後に管理画面表示がおかしくなった時の対処法|guttyo blog

上記ブログの管理者さんが調べたことによると、原因はこういうことらしい。

この現象の原因は下記のような.htaccessファイルでPHPをCGIモードで動かしているときに、
load-style.phpが吐き出す content-type=text/htmlだからだそうだ。
text/cssではないのでFirefoxではcssと認識しないということらしい。


AddHandler application/x-httpd-php5cgi .php

なるほど、text/cssになればいいって訳なのね。
でも、部分的にCGIとして動かしてはいてもPHP全体をCGIとして動かしてはいないし、
やっぱ、なんかおかしくなってるのかなぁ?

まぁ、要はこれが重要な訳で。

# こいつだけモジュール版で動作させる


AddHandler application/x-httpd-php .php

このコードをwp-adminファイルの.htaccessに記載すると、
今まで悩んでいたレイアウト崩れは嘘のように解決しました。

define( ‘CONCATENATE_SCRIPTS’, false );
ともおさらばしました。