商品一覧ページ 編集マニュアル

はじめに

編集は、間違うと画面の表示が崩れる恐れがあります。
また、ワードプレスの「ビジュアルモード」で開くと、何も操作しなくてもタグが自動で挿入されたり、タグが消去される恐れがあります。
ですので、
1)編集は必ず「テキストモード」で行い、「ビジュアルモード」は開かない。(画面は、プレビューボタンからご確認下さい)
2)編集を行う際は、開始時に編集画面のテキストを全てコピーし、いつでも復元できるようにバックアップをとる。

この2点にご注意頂くよう、よろしくお願いします。

商品一覧の編集

ダッシュボード左側の、商品一覧から編集を行います。

<!-- コピーここから -->
            <div class="product-list product-list-wedding">
                <a href=""><!-- ←リンクURL -->
                    <div class="product-list-imgbox">
                    <!-- ↓画像挿入 -->
                    </div>
                    <p class="textalign-center">商品名</p><!-- ←商品名 -->
                </a>
            </div>
<!-- コピーここまで -->

↑これが、商品1つのまとまりです。
このまとまりを、商品一覧ページに貼り付けor削除することで、商品一覧ページを編集できます。

ここに、
①飛び先のリンクURL
②画像ファイル
③商品名
の3つの情報を入れます。

①「リンクURL」部分に「a href="http://~"」のように、飛び先のURLを入れて下さい。
商品ページのURLは、ダッシュボードの「商品」⇒任意の商品名⇒「短縮URL」で取得できます。

② <!-- ↓画像挿入 -->の下に「メディアの追加」⇒「メディアの挿入」で画像を挿入して下さい。
※挿入する画像のサイズは統一して下さい。
異なるサイズを挿入すると、高さがそろわず見栄えが悪くなります。
現在、単品商品のサイズは「1000px × 500px」、箱詰めや式菓子は「600px × 500px」です。

③商品名を記入します。

実際には、以下のように記述ます。

<!-- コピーここから -->
            <div class="product-list product-list-wedding">
            <a href="http://www.maruyahonten.com/?p=794"><!-- ←リンクURL -->
                    <div class="product-list-imgbox">
                    <!-- ↓画像挿入 -->
                    <img src="/maruyahonten/wp-content/themes/canvas_tcd017/img/echigomeika/ichigogelee.jpg" alt="苺ジュレ 越後姫" class="alignnone size-full" />
                    </div>
                    <p class="textalign-center">苺ジュレ 越後姫</p><!-- ←商品名 -->
                </a>
            </div>
<!-- コピーここまで -->


商品数を追加したい場合は、
<!-- コピーここから -->

<!-- コピーここまで -->

を並べて追加します。
ダッシュボードでの編集は操作性が悪く、ミスをしやすいです。
あらかじめ、各商品名毎のまとまりをテキストデータと、一覧ページ下書き用のテキストデータを用意しておき、一覧ページ下書き用テキストに各商品を一旦貼り付け、ダッシュボードには商品一覧テキストのコピーを貼り付ける方法が簡単で確実かと思います。

<!-- コピーここから -->
            <div class="product-list product-list-wedding">
                <a href="http://www.maruyahonten.com/?p=551"><!-- ←リンクURL -->
                    <div class="product-list-imgbox">
                    <!-- ↓画像挿入 -->
                    <img src="/maruyahonten/wp-content/themes/canvas_tcd017/img/echigomeika/kajuen.jpg" alt="新潟果樹園" class="alignnone size-full" />
                    </div>
                    <p class="textalign-center">新潟果樹園</p><!-- ←商品名 -->
                </a>
            </div>
<!-- コピーここまで -->


<!-- コピーここから -->
            <div class="product-list product-list-wedding">
                <a href="http://www.maruyahonten.com/?p=372"><!-- ←リンクURL -->
                    <div class="product-list-imgbox">
                    <!-- ↓画像挿入 -->
                    <img src="/maruyahonten/wp-content/themes/canvas_tcd017/img/echigomeika/edamame.jpg" alt=" 越後のえだまめ餅" class="alignnone size-full" />
                    </div>
                    <p class="textalign-center">越後のえだまめ餅</p><!-- ←商品名 -->
                </a>
            </div>
<!-- コピーここまで -->


<!-- コピーここから -->
            <div class="product-list product-list-wedding">
                <a href="http://www.maruyahonten.com/?p=794"><!-- ←リンクURL -->
                    <div class="product-list-imgbox">
                    <!-- ↓画像挿入 -->
                    <img src="/maruyahonten/wp-content/themes/canvas_tcd017/img/echigomeika/ichigogelee.jpg" alt="苺ジュレ 越後姫" class="alignnone size-full" />
                    </div>
                    <p class="textalign-center">苺ジュレ 越後姫</p><!-- ←商品名 -->
                </a>
            </div>
<!-- コピーここまで -->



ページ先頭へ戻る