Theme:

Organize this blog by theme

Woocommerce Storefront ペ
  ショップ用に作られたWoocommerce、情報が少ない中で 色々設定をいじるのは少し抵抗がありませんか。 カート決済があるシステムなので「どこまで改変できるか」という所が問題ですが、 工夫すれば思った以上には頑張れる感じなのと、カートがあるWoocomerceページ以外は そのまんまワードプレスという感じです^^ 実はこのブログもWoocommerce基本テーマの Storeflont のテーマを改変して作られていますのでご参考ください。   ポイント このページではWoocommerce の基本テーマ Storefront で ページ毎に違うスタイルシートの読み込みを説明します。   Index   Woocommerceでショップを運営しながらブログも執筆する   Woocommerce でショップを運営しながらワードプレスでブログをする方法は3種類あり、 1.ドメイン直下にフォルダを作り別のワードプレスを入れる(サブディレクトリ) http://hag-r.com/blog 2.サブドメインを取得し別のワードプレスを入れる http://blog.hag-r.com/ 3.投稿ページだけ専用のスタイルシートを読み込む   このHAG-rのサイトを作る際に僕が選択したのはこの3番めの方法です。   個人的には過去に欲張って中規模のサブディレクトリ運用のサイトを作ろうとしてモチベーション的に失敗してしまった事があるので、 (先にサブディレクトリにおく内容を重視して作ってしまって、メインURLのコンテンツが空気になって後悔しました) もうただのブログなんだし、Woocommerceはショップが主役だし、基本はSEOでなく広告戦略だという所で納得をして、自分のモチベーションを最優先に運用できる環境を選びました。 ショップページでは表現できない事をブログで表現できたら理想です。   1と2の方法のメリットはお気に入りのワードプレスのテーマなどがあればすぐに導入できデザイン的な問題は解決に近いです。 またAmebaブログなど国内にも良いブログサービスがあるため、それならデザインを気にする事なく一番気軽に、さらに高品質にブログ運用できる可能性もあります。 ぜひご自身の用途や希望にあったブログ運用方法を見つけてくださいね。   Woocommerce Storefront でページ毎にスタイルシートを読み込む     さて、ブログ運用の話が長くなりましたが、こちらは ブログのためのCSSだけでなくWoocommerceショップ全般的にも使える条件分岐です。 ■の間部分にCSSへのパスを入れ替えて入力します。 (Woocommerceでは必ず子テーマ「storefront-child など」を作り、さらにバックアップをとって改変しましょう) [crayon-5dcb0631c913d602403177/]   ショップページの条件分岐は下記3つの複数条件のいずれかにかかる場合に発動します。 (複数条件の場合「||」で区切ります) is_woocommerce() アーカイブ、商品ページを含めたwoocommerce全般 is_front_page() ストアトップページ is_page() 決済ページへの導入など必要な固定ページを個別で入力します woocommerce公式ページには条件分岐タグが一覧で確認できます。 >>Woocommerce公式ページ   ストアトップページだけ違うCSSに   is_front_page()   ストアトップページにだけに違うCSSスタイルを適用させます。 トップページだけに使うbxsliderなど javascript のプログラムを導入したりするのに需要がありそうですね。 [crayon-5dcb0631c9148408081504/] <?php if (is_front_page()): ?>   <?php endif; ?> ・・・の間にトップページだけに表示したい内容やプログラムを記述します。   上記ではCSSを直接記述してしまいました。HAG-rではショッピングカートやフッターなどトップページでは表示させたくなかったので、display:noneで結構強引に消しています。 無駄なCSSは多いはずですので、これが嫌ならWoocommerceのショップページとスタイルを変えるブログ運用はやめておいた方が良いでしょう。   Woocommerce で商売を考えているユーザーは絶対数が少ないです。 情報も少ないのでトライ&エラーでやるしかないのはツライところですが、 言葉の壁がある日本人にとって海外販売はある意味チャンスなのかもしれません。 しっかりバックアップとって、リスクを減らしてショップ制作を頑張っていきましょう!   日本と海外では文化が違う。商品ページでも商品説明文を変えたり工夫が必要じゃ  そうだねえ  6+
》more  
管理
Index ログイン [myphp file=’moo-PR’] を記述で([全角を[に直す)オリジナルPHPを投稿ページ内部に挿入 (この例では広告) お母さんやお婆ちゃんが子供の事を考えて料理する場合、栄養を取らせるためにお味噌汁に子供が嫌いな玉ねぎや人参など具材をたくさん入れる。 作品紹介 I like this コメントコメントコメントコメント コメント メッセージ コメント コメントコメントコメント h2 h3 h4 h5 h6 h7 h8 h9 箇条書きコンテンツ アイコン1アイコン1アイコン1アイコン1アイコン1アイコン1アイコン1アイコン1 アイコン2アイコン2アイコン2アイコン2アイコン2アイコン2アイコン2アイコン2アイコン2アイコン2 アイコン3アイコン3アイコン3アイコン3アイコン3   文字装飾 アンダーライン大きい文字小さい文字赤い文字 風船   背景装飾 背景タイトル背景タイトル背景タイトル背景タイトル背景タイトル 背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景背景 引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用     線 class=”hr-1″ class=”hr-3″         YOUTUBE   画像 dark のクラスで img.dark{filter: brightness(85%);}   class=”blogimg2″ max-width:250px;max-height:300px;の大きさ、PCで左寄せだがスマホでは中央に表示される。最初っからセンター寄せしたい時にはcenterを併用することもできる。 (ちなみにclass=”blogimg1″ だと画像の大きさそのまま表示する普通の画像)         class=”okao” 縦150px横150px以上大きくなる事はない。       class=”nobimax” 画像を区切りとして使いたい、もしくは横幅一杯表示させたい場合は CLASS nobimax を付与 高さはオート。     class=”img-right” 画像右に回り込み(スマホ縦では回り込みなし)img-rightを付与。左はimg-left。 横幅をMAX220pxとしている。英語や記号などを使うと予期せぬ所で折り返してしまう場合があるので注意。画像⇒文章の順番にかく。ワードプレス投稿画面でimg要素に対して段落をおかず文章を記述する事。     クラスの複数指定でできる画像効果 class=”■■ shadow” 影をつける場合は プラスで(classの複数付与は半角スペースで区切り)shadowをつける。   class=”■■ waku”   0
》more  

Articles that are read well

    Sorry. No data so far.