Webの記録

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

投稿日:2015年9月26日 更新日:

この記事は約 8 分で読めます。

テンプレート画像
比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。
スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」があります。
デフォルトのテンプレートも良いのですが、今回「西ゆうの世界Shop」さんで部分的にテンプレートをカスタマイズすることになりました。
今回は、フリーページ表示順を任意の順番に変えてみます。
※今回のトップ画像は「Bit」のページのものを使わせていただきました。



目次

  • テンプレート編集の前に
  • フリーページのページ番号を調べる
  • フリーページの表示順を変える


テンプレート編集の前に

管理画面を開いて、「ショップ作成」→「デザイン」の画面で編集したいテンプレートの部分の「デザイン編集」ボタンをクリックします。
※編集前に何もいじってないテンプレートをコピーして、編集はコピー分を利用した方が万が一の時に戻れるので安心です!

カラーミーショップテンプレート編集

テンプレート編集できるのは、HTML編集可能な分で8つ。編集したい部分がどのテンプレートになるかは「テンプレートガイド」を参照してください。多分、「共通」を編集することが多いかな~とは思いますが。。。

【参考】テンプレートガイド

カラーミーショップテンプレート編集

フリーページのページ番号を調べる

最初の状態だと登録した順に並びます。
しかし、後で追加したページを上に並べたいときなど、任意の順番に並べるためにはテンプレートを書き換える必要があります。

任意の順番にするために、現在の状態でフリーページのページ番号を調べておきます。(フリーページを作成したページを見て、番号がf1・f2とある部分をメモしておきます)

カラーミーショップフリーページ編集

フリーページの表示順を変える

テンプレート「共通」の上級者モード「HTML・CSS編集」画面で、HTMLの中で以下のような部分を探します。

//83行目あたりにあります
<div id="footer-wrapper">
      <div class="row">
        <div class="col col-sm-12 col-lg-4 footer-primary">
          <{if $free_area_flg == true}>
            <ul class="footer-nav freepage-nav">
              <{section name=num loop=$freepage}>
                <li><a href="<{$freepage[num].link_url}>"><{$freepage[num].page_title}></a></li>
              <{/section}>
            </ul>
          <{/if}>


ループで順番にフリーページを表示するようになっているので、以下の部分を削除します。

//以下の分を削除
              <{section name=num loop=$freepage}>
                <li><a href="<{$freepage[num].link_url}>"><{$freepage[num].page_title}></a></li>
              <{/section}>


削除した箇所に、以下のように任意の順番で並べる記述します。ページが多いと行数も多くなるので大変ですが。。。

f1のページの場合、$freepage[0]となり、f2のページの場合、$freepage[1]となります。番号が1つずれるので注意!

 
//削除した部分に以下のように、任意の順番で記述
   		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[0].link_url}>" class="show txt_c_333"><{$freepage[0].page_title}></a>
		</li>


$freepage[0]の部分だけ、$freepage[1]というように変更して複数行記述します。

<li class="pad_10 bor_t_1">
		<a href="<{$freepage[0].link_url}>" class="show txt_c_333"><{$freepage[0].page_title}></a>
		</li><!-- 愉画 -->
   		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[1].link_url}>" class="show txt_c_333"><{$freepage[1].page_title}></a>
		</li><!-- 干支守護仏 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[2].link_url}>" class="show txt_c_333"><{$freepage[2].page_title}></a>
         </li><!-- お天道様 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[3].link_url}>" class="show txt_c_333"><{$freepage[3].page_title}></a>
		</li><!-- 詩会わせ小包 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[4].link_url}>" class="show txt_c_333"><{$freepage[4].page_title}></a>
		</li><!-- YOUME地蔵 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[5].link_url}>" class="show txt_c_333"><{$freepage[5].page_title}></a>
		</li><!-- E・NI・SHI -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[6].link_url}>" class="show txt_c_333"><{$freepage[6].page_title}></a>
		</li><!-- ガールズあーと -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[7].link_url}>" class="show txt_c_333"><{$freepage[7].page_title}></a>
		</li><!-- kokoro佛 -->
    		<li class="pad_10 bor_t_1">
		<a href="<{$freepage[10].link_url}>" class="show txt_c_333"><{$freepage[10].page_title}></a>
		</li><!-- エコバック -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[8].link_url}>" class="show txt_c_333"><{$freepage[8].page_title}></a>
		</li><!-- Tシャツ 瑜伽道場(男女共用) -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[9].link_url}>" class="show txt_c_333"><{$freepage[9].page_title}></a>
		</li><!-- Tシャツ 瑜伽道場(レディース用) -->

ちゃんと並び替えができました!

カラーミーショップテンプレート編集

まだ他にもちょこちょこテンプレートをいじることはあると思うので、また何かあればメモしていきたいと思っています。


今回カスタマイズさせていただいたショップは、「西ゆうの世界Shop」です。
かわいくキレイなイラストを描かれている、西ゆうさんのオリジナル商品を販売しているお店です。

これから様々な商品を開発していく予定があるようですので、楽しみなお店です♪





-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …