「カスタマイズ」タグアーカイブ

Stinger7の「powered by STINGER」をフッターから削除する方法

レスポンシブWordpressテンプレートのスティンガー7のカスタマイズ

超有名WordpressテンプレートのStingerの中でもかなり優秀なStinger7。レスポンシブデザインに対応していて、役立つ設定も豊富で良い。

ただ、悲しい事にテンプレートでは「powerd by STINGER」になってしまっている
powered の綴りが間違っていて、powerd になっている。これはダサすぎる。
ochikomi
 
フッターの powerd by STINGER を修正又は削除したいと思っても、ワードプレス管理画面からのテンプレートの変更(テーマの編集)では削除できない。
 
 

powerd by STINGER を編集・削除する方法

まず管理画面の footer.phpfunctions.php の編集ではここの部分はいじれないので、FTPソフトが必要になる。
 
FFFTPかFileZillaのようなFTPソフトを使い、Wordpressをインストールしているサーバーにアクセスしよう。
サーバーのコントロールパネルのブラウザのFTPでも同じようにアクセスする。

ファイルパス:

wp-content/themes/stinger7/js

の中にある、base.js を編集する。

ファイルの中身はややこしそうなコードの羅列だが、「stinger」と検索するとヒットする箇所がある。

そこに

<a href=”//wp-fun.com/” rel=”nofollow”>powerd by STINGER</a>

と書いてあるはずなので、この部分を削除するなり変更するなりする。

base.jp を再度上書きアップロードして完了。

この記事も読まれています

投稿一覧の画面にアイキャッチ画像を表示させるプラグイン – WordPress

WordPressのダッシュボードに、アイキャッチ画像/Featured imageを、投稿一覧/All Posts画面に表示させよう

 
Wordpressの管理画面の、投稿一覧のページには、通常は、タイトル、作成者、カテゴリー、タグ、コメント、日時のみが表示されている。

ここにアイキャッチ画像のサムネイルを追加しよう。
 

サムネイル追加の方法はたくさんあるが…プラグインが一番簡単

functions.phpに記述する方法もあり、それほど難しくないのだが、今回は最も簡単で、最もWordpressっぽい、プラグインによる方法を紹介。

 
plugin-new
WordPress管理画面の左メニュー「プラグイン」>「新規追加」をクリック。
 

plugin-3
画面右側の検索ボックスに「Featured image to All-Posts」と書いて検索。
 
プラグイン「Featured image to All-Posts」で、「いますぐインストール」をクリック。
 
インストール完了画面が表示されたら、「プラグインを有効化」をクリック。

これでおしまい。アイキャッチ画像追加表示に設定はありません。

eyecatch
管理画面の、投稿一覧にアイキャッチ画像のサムネイルが追加されます。

この記事も読まれています

Zen Cartで、言語によって都道府県又は、State/Provinceのプルダウンメニュー表示非表示を切り替える

Zen Cartの都道府県や海外の州などの選択が邪魔

ZenCart 1.3.8a – 1.5.1
日本国内では配送モジュールで都道府県から送料を算出しているので、ドロップダウンメニューが必要。

 
しかし海外対応にした際に、State/Provinceとでてドロップダウンをクリックしても、アメリカ以外は州などが選べない。

 
言語によって表示・非表示を切り替える。
大規模カスタマイズになると、チェック部分などに問題が発生するので、あえて小規模なとりあえずカスタマイズにしておく。日本語ができて英語ができない台湾人などには対応できないが、その場合は、日本語ページで外国在住用、日本在住用・英語ページ外国在住用の3つに分ける手間が必要となる。

 

Zen Cartの送料カスタマイズ

触る場所は、

includes/templates/template_default/templates/tpl_modules_create_account.php

85行目~110行目辺り。

<?php
if (ACCOUNT_STATE == ‘true’) {
$country_zones_pull_down = array();
if ($flag_show_pulldown_states == true) {
$country_zones_pull_down = zen_prepare_country_zones_pull_down($selected_country);
?>
<label class=”inputLabel” for=”stateZone” id=”zoneLabel”><?php echo ENTRY_STATE; ?></label>
<?php
echo zen_draw_pull_down_menu(‘zone_id’, $country_zones_pull_down, $zone_id, ‘id=”stateZone”‘);
if (zen_not_null(ENTRY_STATE_TEXT)) echo ‘&nbsp;<span class=”alert”>’ . ENTRY_STATE_TEXT . ‘</span>’;
?>
<br class=”clearBoth” id=”stBreak” />
<?php }
?>
<label class=”inputLabel” for=”state” id=”stateLabel”><?php echo $state_field_label; ?></label>
<?php
echo zen_draw_input_field(‘state’, ”, zen_set_field_length(TABLE_ADDRESS_BOOK, ‘entry_state’, ’40’) . ‘ id=”state”‘);
if (zen_not_null(ENTRY_STATE_TEXT)) echo ‘&nbsp;<span class=”alert” id=”stText”>’ . ENTRY_STATE_TEXT . ‘</span>’;
if ($flag_show_pulldown_states == false) {
echo zen_draw_hidden_field(‘zone_id’, $zone_name, ‘ ‘);
}
?>
<br class=”clearBoth” />

 
———————————————————-
この前の部分、85行目のところを、ADD_FURIGANA の一文を追加。
最後の部分、110行目あたりに、<?php } ?> の一文を追加。

<?php if (ADD_FURIGANA == ‘true’) { ?>
<?php
if (ACCOUNT_STATE == ‘true’) {
$country_zones_pull_down = array();
~~~~~ 中略 ~~~~~
echo zen_draw_hidden_field(‘zone_id’, $zone_name, ‘ ‘);
}
?>
<?php } ?>
<br class=”clearBoth” />

これで、入力時にふりがながいる言語=日本語 の際には都道府県が表示され、それ以外(英語など)には表示されないこととなる。
あとは必須入力を解除するだけなので、管理画面-一般設定-最小値の設定 から、都道府県の最小値を0にしておく。

これでとりあえずは大丈夫。今回はめんどうだったので「ふりがな」あるなしで場合分けしたが、国IDやその他の値で場合分けすれば、日本語の海外在住者にも対応可能となる。

参考までに。

 

Zen Cart送料カスタマイズの注意点

この設定だと、料金自動計算などのある特定の状況下においてアカウント作成時にエラーが起こる場合がある。
もしも、アカウント作成時にエラーが発生する場合はこのカスタマイズでは対応できないので注意。

この記事も読まれています

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!

この記事も読まれています

Improved Attributes Controllerで、Zen cart オプション値を使いやすくカスタマイズ

「Improved Attributes Controller」というものがある。

ここからダウンロード。
Improved Attributes Controller.zip

これでZenカートのオプション名とオプション値が連動してない状態は改善される。
方法は簡単。adminフォルダに attributes_controller.php を上書きするだけ。
Zen Cartにとって、オプション値、オプション名、オプション編集は、ダウンロード商品や、サイズ、色などを指定する、とても重要な機能にも関わらず、使い勝手が非常に悪い。

※Zen Cart v 1.3.9以降は初めから組み込まれているので、上記のファイルをダウンロードする必要はないが、後述のカスタマイズは同様の方法で可能。

Improved Attributes Controller で、
2007haq1021-01
この状態から、
attributes_controller1
この状態になる。

まあこまでは簡単。他のページでも紹介されているが、これだけでは不十分で、微妙に使い勝手が悪い。元に比べるとはるかに改善されてはいるが。

attributes_controller_sause

ここ。1670行目あたりから始まる、

<!– start modification for improved attributes controller –>

<td class=”attributeBoxContent”>&nbsp;<?php echo TABLE_HEADING_OPT_NAME . ‘<br />’; ?><select name=”options_id” id=”Option Name” onchange=”TCN_reload(this)” size=”<?php echo ($action != ‘delete_attribute’ ? “5” : “1”); ?>” >
<option selected>Option Name</option>
</select>&nbsp;</td>
<td class=”attributeBoxContent”>&nbsp;<?php echo TABLE_HEADING_OPT_VALUE . ‘<br />’; ?><select name=”values_id[]” id=”Option Value” onchange=”TCN_reload(this)” multiple size=”<?php echo ($action != ‘delete_attribute’ ? “5” : “1”); ?>” >
<option selected>Option Value</option>
</select>&nbsp;</td>
</tr></table></td></tr>
</table>

この赤文字で書いた「5」の部分を 10 でも 20 でも、好きな数字に変える事で、
attributes_controller1
これが、

attributes_controller_2
こうなる。仮に 10 にしてみた。

これで作業効率は10倍以上と言っても過言ではないぐらい上がる。

この記事も読まれています

EC-CUBE 2.11.x – 3.0系で商品詳細サブ画像を3列表示に

商品詳細サブ画像を3列表示

元々、EC CUBEの商品詳細ページは、サブ画像とかサブコメントは縦に一列に並ぶことになる。
ちょっと野暮ったいので、3列になるようにしてみた。
eccube-3retsu
こんな感じ。

 

phpファイルのカスタマイズ方法

products/detail.phpの部分。管理画面のデザイン管理から行くと、「商品詳細ページ」のページ詳細編集から。
 
「詳細」と「お客様の声」の間の部分。

—————————————————————

<!–▼サブコメントここから–>
<!–{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}–>
<!–{assign var=key value=”sub_title`$smarty.section.cnt.index+1`”}–>
<div class=”productsubarea”><!–{if $arrProduct[$key] != “”}–>
<h3><!–★サブタイトル★–><!–{$arrProduct[$key]|h}–></h3>
<!–{/if}–>
<!–{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}–>

<!–{if $arrProduct[$ckey] != “”}–>
<div class=”productsubtext”><!–★サブテキスト★–><!–{$arrProduct[$ckey]|nl2br_html}–></div>
<!–{/if}–>
<div class=”productsubphotoimg”><!–{if $arrProduct[$lkey]|strlen >= 1}–>
<a class=”expansion” href=”&lt;!–{$smarty.const.IMAGE_SAVE_URLPATH}–&gt;&lt;!–{$arrProduct[$lkey]|h}–&gt;” target=”_blank”>
<!–{/if}–>
<img src=”&lt;!–{$arrFile[$key].filepath}–&gt;” alt=”&lt;!–{$arrProduct.name|h}–&gt;” width=”&lt;!–{$arrFile[$key].width}–&gt;” height=”&lt;!–{$arrFile[$key].height}–&gt;” /></a><!–{if $arrProduct[$lkey]|strlen >= 1}–>
<span class=”mini”>

<a class=”expansion” href=”&lt;!–{$smarty.const.IMAGE_SAVE_URLPATH}–&gt;&lt;!–{$arrProduct[$lkey]|h}–&gt;” target=”_blank”>
画像を拡大する</a>
</span>
<!–{/if}–></div>
<!–{else}–>
<p class=”subtext”><!–★サブテキスト★–><!–{$arrProduct[$ckey]|nl2br_html}–></p>
<!–{/if}–>
<!–▲サブ画像–>

</div>
<!–{ if $smarty.section.cnt.iteration is div by 3 }–>
<br clear=”all” />
<!–{/if}–>

<!–{/section}–>
<!–▲サブコメント–>

—————————————————————

簡単に言うと、詳細画面の画像を横に並べ、カウントが3になったら改行を入れるという処理をする。

CSSに以下の分を追加。お好みで適当に調節して。
—————————————–

div.productsubarea {
width:30%;
float:left;
height:290px;
margin-right:3%;
}

div.productsubphotoimg {

}

div.productsubtext {
height:3em;
}

—————————————-

単純にコピペすれば大丈夫なはず。

この記事も読まれています

EC CUBE 商品送料で商品ごとに送料を入力できるようにするカスタマイズメモ

ECCUBEの商品送料、個別送料や基本送料をカスタマイズ

EC CUBEのバージョンは2.4.4。

最終目標は、管理画面で、商品個別の送料が入力できるようにする。

カスタマイズする箇所は4か所。

 

1.元々ある作りかけの商品送料の部分を有効にする

/data/Smarty/templates/default/admin/products/product.tpl

コメントになっている商品送料のコメントを外す(185行目)

<!– ここから商品送料 –>
<tr class=”fs12n”>
<td bgcolor=”#f2f1ec” width=”160″>商品送料</td>
<td bgcolor=”#ffffff” width=”557″>
<span class=”red12″><!–{$arrErr.deliv_fee}–></span>
<input type=”text” name=”deliv_fee”
value=”<!–{$arrForm.deliv_fee|escape}–>” size=”6″
class=”box6″ maxlength=”<!–{$smarty.const.PRICE_LEN}–>”
style=”<!–{if $arrErr.deliv_fee != “”}–>background-color: <!–{$smarty.const.ERR_COLOR}–><!–{/if}–>”/>円
<span class=”red10″> (半角数字で入力)</span></td>
</td>
</tr>
<!– ここまで商品送料 –>

 

2.アドミン画面に入力用のテキストボックス(フォーム)を作る

/data/Smarty/templates/default/admin/products/confirm.tpl

在庫数とポイント付与率の間に追加する。(129行目)

<tr>
<td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>在庫数</td>
<td bgcolor=”#ffffff” width=”557″ class=”fs12n”>
<!–{if $arrForm.stock_unlimited == 1}–>
無制限
<!–{else}–>
<!–{$arrForm.stock|escape}–>
個<!–{/if}–>
</td>
</tr>
<!–{/if}–>
<!– 商品送料の確認画面 –>
<tr>
<td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>商品送料</td>
<td bgcolor=”#ffffff” width=”557″ class=”fs12n”>
<!–{$arrForm.deliv_fee|escape}–>
円</td>
</tr>
<!– 商品送料の確認画面 –>
<tr>
<td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>ポイント付与率</td>
<td bgcolor=”#ffffff” width=”557″ class=”fs12n”>
<!–{$arrForm.point_rate|escape}–>
%</td>
</tr>

 

3.送料の計算の部分に、個別商品を追加する計算式を追加

/data/class_extends/helper_extends/SC_Helper_DB_Ex.php

送料計算式をカスタマイズ。

$objPage->tpl_total_deliv_fee に、カートに入った商品の、商品送料deliv_feeの合計が格納されている。

/httpdocs/data/class/helper/SC_Helper_DB.php
から、function sfTotalConfirmの部分(1467~1536行目)をすべて

SC_Helper_DB_Ex.php の
class SC_Helper_DB_Ex extends SC_Helper_DB {
}
?>
の間にコピーし、以下の部分(55行目(コピペの仕方により変動する))を変更。

// 商品ごとの送料が有効の場合
if (OPTION_PRODUCT_DELIV_FEE == 1) {
$arrData[‘deliv_fee’]+= $objPage->tpl_total_deliv_fee;
//$objCartSess->getAllProductsDelivFee();
}

 

コピペ後はこんな感じになるはず↓

 

class SC_Helper_DB_Ex extends SC_Helper_DB {
function sfTotalConfirm($arrData, &$objPage, &$objCartSess, $arrInfo, $objCustomer = “”) {
// 未定義変数を定義

—–中略—–

$arrData[‘add_point’] = 0;
}
return $arrData;
}
}
?>

 

4.パラメーターで個別送料を有効にしておく

管理画面の[システム設定]-[パラメータ設定]で「OPTION_PRODUCT_DELIV_FEE」を’1’にする。

これでおしまい。

合計送料X = 配送業者送料A + 商品送料合計n(今追加した分) で算出されるようになる。

配送業者送料A を地域別に設定。

大きいものa と小さいものb を購入された場合、n(a)に500、n(b)に0 を入れておけば、
X = A + n(a) + n(b) となるので、n(b)が0なので追加送料は発生しない。
一方大きいものを2つ購入された場合は、n(a)+n(a’) となり、送料は加算される。
また、小さいものを1つ購入された場合は、X = A + n(b) なので A がそのまま送料とになる。

この記事も読まれています

Stinger3で関連記事の「記事を読む」の表示を変える方法

Stinger3で英語サイトを運営したい人へ

Stinger3はWordpressでも人気のテンプレートの一つだ。

色々と思うところあってこのブログではStingerは使っていないが、カスタマイズをする機会もあるのでメモ。

Stinger3では、自動で 「記事を読む」 というという文言が、記事のサムネイルと共に表示される。これは英語環境でも自動で変わってくれない。

翻訳ファイルを使ってるわけではなく、直接ソースに書き込んでいるからだ。
kanrenkijiwotuduki

小難しいことは置いておいて、これを今回は 「Read More」 に変えてみる。

 

 

編集方法

「外観」→「テーマの編集」→「home.php」を開くと

readmoreandnoposts

こんな感じで、「記事を読む」 と 「記事がありません」 と書いてる場所があるので、これを上のように、 「Read More」 と 「No Post」 のように適当に変更しよう。

ついでに、
「外観」→「テーマの編集」→「単一記事の投稿(single.php)」の中も同じように変更しておこう。
これで 「記事を読む」 の言葉を変更することができる。

readmoreni

 

関連記事:stinger3で「関連記事」の表示を変える方法

この記事も読まれています