WordPressや旅・買い物・勝手な情報!

テーマを「もしもドロップシッピング」サイト用にカスタマイズしてみる!(その1)

管理人は別サイトでテーマを公開していますが、ドロップシッピング用にカスタマイズしたテーマは人気テーマの一つです。今回は、当サイトで利用しているテーマを「もしもドロップシッピング」の商品紹介に適したテーマにカスタマズしていみましょう。
 
テーマのカスタマイズですが、管理画面の「テーマ編集」で行うのはお勧めできません。何故なら、PHPでの記述が必要ですので、記述を間違えるとWordPress自体が動作しなくなるからです。
障害によっては、画面が真っ白になって何も出来なくなったりします。
できれば、パソコン上のエディタで修正して、都度アップロードして確認しながらカスタマイズを進めてください。

 

編集用エディタは何を使えば良いの?

エディタはいろいろ紹介されていますので、ご自分の環境に合ったエディタを利用しましょう。
管理人のお勧めのエディタですが、参考にしてください。
 

スポンサーリンク

MACの場合

  • Coda2
    管理人が利用しているエディタで、コードを変更したらワンクリックでアップロードできる様に設定しています。個人的には一番使いやすいと思います。
  • Sublime text
  • Dreamweaver

Windowsの場合

※文字コードは「UTF-8」、改行コード「LF」が利用できるエディタが必須です。メモ帳は文字コード「S-JIS」、改行コード「CR LF」なので利用できません。

 
 

カスタマイズするテーマのインストール

何はともあれ、利用するテーマをインストールすることから始めます。
今回は、前述しましたが当サイトでも利用している「クールでかっこいいWPテーマ Ver.15」を利用して、カスタマイズしてみます。

WordPress用のテーマについては、下記で「無料テーマ」を配布していますので、気に入っていただけるテーマがあれば利用してみて下さい。
無料テーマダウンロードテーマ一覧

 
テーマをインストールしたばかりの表示が下記になります。

 
 

もしもドロップシッピング提供の「らくぺた」機能を有効にする

なるべく簡単に「もしもドロップシッピング」の商品を掲載するために、「らくぺた」を利用してサイトを作成することにします。
らくぺた」の機能を有効にするためには、次のスクリプトをテーマに追加します。

<script type="text/javascript">
window.msm = {};
window.msm.sid = ショップID;
</script>
<script type="text/javascript" src="https://dn.msmstatic.com/article/handler.js"></script>
<script type="text/javascript" src="https://dn.msmstatic.com/article/rkpt_grp/bundle.js" charset="utf-8"></script>

上記は「もしも」の管理画面で、「らくぺた」のページに表示されていますので、そのまま利用してください。

追加するテーマファイルは、header.phpで、~内に追加します。

 
 

ナビゲーションをドロップシッピング仕様に変更する

ヘッダー部のナビゲーションを、ドロップシッピング用に変更しましょう。
管理画面のメニュー機能を利用して変更することも可能ですが、直接テーマを書きかえて変更します。
header.phpの下記の部分を

<nav>
<ul>
  <li><a href="<?php echo home_url(); ?>"><span class="target">ホーム</span></a></li>
  <li><a href="javascript:void(0);"><span class="target">MENU01</span></a>
    <ul>
      <li><a href="javascript:void(0);">SUB MENU11</a></li>
      <li><a href="javascript:void(0);">SUB MENU12</a></li>
      <li><a href="javascript:void(0);">SUB MENU13</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);"><span class="target">MENU02</span></a>
    <ul>
      <li><a href="javascript:void(0);">SUB MENU21</a></li>
      <li><a href="javascript:void(0);">SUB MENU22</a></li>
      <li><a href="javascript:void(0);">SUB MENU23</a></li>
      <li><a href="javascript:void(0);">SUB MENU24</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0);"><span class="target">MENU03</span></a></li>
  <li><a href="javascript:void(0);"><span class="target">MENU04</span></a></li>
 </ul>
</nav>

次の様に変更します。

<nav>
<ul>
  <li><a href="<?php echo home_url(); ?>"><span class="target">ホーム</span></a></li>
  <li><a href="https://mp.moshimo.com/about/flow?shop_id=ショップID" target="_blank"><span class="target">お買い物の流れ</span></a></li>
  <li><a href="https://mp.moshimo.com/about/payment?shop_id=ショップID" target="_blank"><span class="target">支払い配送について</span></a></li>
  <li><a href="https://mp.moshimo.com/about/return?shop_id=ショップID" target="_blank"><span class="target">返品について</span></a></li>
  <li><a href="<?php echo home_url(); ?>/サイト運営/" target="_top"><span class="target">サイト運営</span></a></li>
  <li><a href="https://mp.moshimo.com/cart?shop_id=ショップID" ><span class="target">カートを見る</span></a></li>
</ul>
</nav>

上記でショップIDは、ご自分のショップIDに変更して、利用してください。
ナビゲーションの個数は6個です。段落ちする場合は「カスタマイザー」で、ナビゲーションの個数を6個に指定してください。
 
クールでかっこいいWPテーマシリーズ」以外のテーマによっては、直接書きかえる場所が分からない場合があります。
そんな場合は、管理画面の「メニュー機能」でナビゲーションを作成します。

 
ナビゲーションの設定ができると、次のようにナビゲーションが変更されます。

 
 
➡ 次回はサイドバーにドロップシッピング特有の項目を作成します。
 
 

スポンサーリンク

同ジャンル・関連ページ




コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA