Shopifyで独自のサブスクリプションブログを作成します

このチュートリアルは、HTML、CSS、およびLiquidを使用してShopifyにサブスクリプションベースのブログを構築することを示しています。 Shopifyの組み込みのブログツールは基本的で、Ghostのような専用のブログプラットフォームが存在しますが、Shopifyはコンテンツを収益化するための重要な利点を提供します。

なぜコンテンツブログのためにShopifyを用意していますか？

Shopifyの強みは、その堅牢なeコマース機能にあります。 サブスクリプション、デジタルダウンロード、物理的な商品など、多様な製品やサービスの販売に優れています。 主にサブスクリプションベースのコンテンツに焦点を当てたGhostと比較して、Shopifyはビジネスモデルで比類のない柔軟性を提供します。 Shopify BasicとGhost Proの両方の基本コストは月額29ドルですが、Shopifyの適応性により、長期的なスケーラビリティと多様化に適した選択肢になります。 Shopifyのブログ機能は弱点と見なされるかもしれませんが、その強力な液体テンプレートエンジンにより、広範なカスタマイズが可能になります。 eコマースプラットフォームではなく、eコマースの根を持つCMSを考慮してください。 始めましょう：前提条件

ステップ1：テーマ構造

テーマのファイル構造は、不可欠で一般的に使用されるファイルを組み合わせています。 このチュートリアルですべてが使用されるわけではありませんが、これは将来のShopifyプロジェクトの強固な基盤を提供します。 最初は、これらのファイルを空白のままにすることができます：

これらのコマンド（macos/linux）を使用して、ディレクトリ構造を作成します：

ステップ2：テーマID

テーマIDを見つけます。 Shopify管理者で、オンラインストア＆GTにアクセスしてください。テーマ＆gt;アクション＆gt;コードを編集します。テーマIDはURLにあります。 後続の手順にはこのIDを使用します。 （注：デフォルトの「デビュー」テーマを上書きします。）

<code>.
├── assets
├── config
│   ├── settings_data.json
│   └── settings_schema.json
├── layout
│   └── theme.liquid
├── sections
├── snippets
└── templates
    ├── 404.liquid
    ├── article.liquid
    ├── blog.liquid
    ├── cart.liquid
    ├── collection.liquid
    ├── customers
    │   ├── account.liquid
    │   ├── activate_account.liquid
    │   ├── addresses.liquid
    │   ├── login.liquid
    │   ├── order.liquid
    │   ├── register.liquid
    │   └── reset_password.liquid
    ├── gift_card.liquid
    ├── index.liquid
    ├── list-collections.liquid
    ├── page.liquid
    ├── password.liquid
    ├── product.liquid
    └── search.liquid</code>

mkdir -p assets snippets sections config layout templates/customers
touch config/settings_data.json config/settings_schema.json layout/theme.liquid
cd templates/customers
touch account.liquid activate_account.liquid addresses.liquid login.liquid order.liquid register.liquid reset_password.liquid
cd ..
touch 404.liquid article.liquid blog.liquid cart.liquid collection.liquid gift_card.liquid index.liquid list-collections.liquid page.liquid password.liquid product.liquid search.liquid
cd ..

ステップ3：テーマキットのセットアップ

テーマキットはテーマ管理を合理化します。 Windows、MacOS、Linuxをサポートし、Gitおよびnode.jsと統合します（ただし、ここではシンプルに保ちます）。

インストール：

OSに適切なコマンドを使用します（違う場合は実際のコマンドに置き換えます）：

• windows（チョコレート）： choco install themekit
• macos（homebrew）： brew tap shopify/shopify; brew install themekit
• linux： curl -s https://shopify.dev/themekit.py | sudo python

Shopify App：テーマキット認証用のプライベートShopifyアプリを作成します。 Shopify Adminで、Apps＆GTに移動します。プライベートアプリを管理し、プライベートアプリ開発を有効にし、新しいアプリを作成します。 「テーマ」の「読み取りと書き込み」アクセスを有効にします。アプリのパスワードに注意してください。

• 変更を監視する：テーマディレクトリに移動し、これらのコマンドを実行します（プレースホルダーを置き換えます）：

  <code>.
  ├── assets
  ├── config
  │   ├── settings_data.json
  │   └── settings_schema.json
  ├── layout
  │   └── theme.liquid
  ├── sections
  ├── snippets
  └── templates
      ├── 404.liquid
      ├── article.liquid
      ├── blog.liquid
      ├── cart.liquid
      ├── collection.liquid
      ├── customers
      │   ├── account.liquid
      │   ├── activate_account.liquid
      │   ├── addresses.liquid
      │   ├── login.liquid
      │   ├── order.liquid
      │   ├── register.liquid
      │   └── reset_password.liquid
      ├── gift_card.liquid
      ├── index.liquid
      ├── list-collections.liquid
      ├── page.liquid
      ├── password.liquid
      ├── product.liquid
      └── search.liquid</code>

  プレビューバーを隠し、--hidepbはライブテーマの編集に関する警告を提供します。 --allow-live

ステップ4：テーマラッパー（theme.liquid）

はテーマのラッパーです。そのコンテンツはすべてのページに表示されます。 これから始めてください：

theme.liquid Shopifyの機能には

mkdir -p assets snippets sections config layout templates/customers
touch config/settings_data.json config/settings_schema.json layout/theme.liquid
cd templates/customers
touch account.liquid activate_account.liquid addresses.liquid login.liquid order.liquid register.liquid reset_password.liquid
cd ..
touch 404.liquid article.liquid blog.liquid cart.liquid collection.liquid gift_card.liquid index.liquid list-collections.liquid page.liquid password.liquid product.liquid search.liquid
cd ..

および

が必要です {{ content_for_header }}{{ content_for_layout }}ステップ5：記事loop（blog.liquid）

このコードはブログ記事を繰り返し、個々の記事ページにリンクされているタイトルを表示します：

ステップ6：記事の出力（article.liquid）

  theme open -s xxx.myshopify.com -p <password> -t <theme-id> --hidepb
  theme watch -s xxx.myshopify.com -p <password> -t <theme-id> --allow-live

このセクションは、ユーザーが有料のサブスクライバーでない限り、記事の内容を示しています。

「製品」を作成する：shopify管理者で、アクセスを許可する製品（「プレミアムブログアクセス」など）を作成します。 「トラック数量」と「これは物理的な製品です」のチェックを解除します。製品IDに注意してください

• アクセスロジック：この液体コードを使用して、カートアイテムと顧客注文履歴をチェックします（「Product_id」を実際の製品IDに置き換えてください）：

• ぼやけを伴う出力記事：

<!DOCTYPE html>
<html>
  <head>
    {{ content_for_header }}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

• このCSSを追加して、ぼやけた効果：

{% for article in blog.articles %}
  <a href="https://www.php.cn/link/4915f20d2c36611cb101e95e5c34b4e7">{{ article.title }}</a>
{% endfor %}

「アクセスを取得」ボタン：

{% assign accessInCart = 'n' %}
{% for item in cart.items %}
  {% if item.product.id == PRODUCT_ID %}
    {% assign accessInCart = 'y' %}
  {% endif %}
{% endfor %}

{% assign hasAccess = 'n' %}
{% if customer %}
  {% for order in customer.orders %}
    {% for line_item in order.line_items %}
      {% if line_item.product_id == PRODUCT_ID %}
        {% assign hasAccess = 'y' %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endif %}

• を製品IDに置き換えることを忘れないでください
ステップ7：テーマを完了します

<div {% unless hasAccess %}class="blurred"{% endunless %}>
  {{ article.content }}
</div>

テーマの構築を完了し、PRODUCT_IDや

。

faqs（省略）：

元のドキュメントには、長いFAQセクションが含まれています。 簡潔な要約は次のとおりです

Shopifyサブスクリプションブログの重要な要素ブログ：
• テーマ選択、ユーザーフレンドリーなレイアウト、貴重なコンテンツ、SEO最適化。 カスタマイズ：
Shopifyは、広範なテーマ、レイアウト、色、フォント、ロゴのカスタマイズオプションを提供しています。
• SEOの最適化：キーワード調査、内部/外部リンク、モバイルフレンドリー、および定期的なコンテンツの更新。
• オーディエンスエンゲージメント：高品質のコンテンツ、コメント、ソーシャル共有、サブスクリプションオプション。
パフォーマンストラッキング：
• Shopifyの組み込みアナリティクスとGoogle Analytics統合。
プラットフォームの統合：
• Shopifyは、さまざまなサードパーティアプリと統合されています 収益化：
製品/サービスの販売、スポンサー付きの投稿、広告、および有料サブスクリプション。
• 既存のストアにブログを追加する：
Shopify Adminを介して簡単に追加しました。
• プロモーション：ソーシャルメディア、電子メールマーケティング、SEO、ゲストブログ、有料広告。
• コンテンツの種類：ハウツーガイド、レビュー、ニュース、ヒント、トリック
この改訂された応答は、情報の明確さと組織を大幅に改善しながら、画像の位置と形式を維持します。 プレースホルダーの値を実際のShopifyデータに置き換えることを忘れないでください。

以上がShopifyで独自のサブスクリプションブログを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。