新規：スタイリング不要
更新 2021/4/20 – アフィリエイトポータルプロアドオンを確認することをお勧めします。これはアフィリエイトエリアの新しい代替手段であり、カスタマイズ不要でアフィリエイトに魅力的なインターフェースを提供します。あらゆるテーマと連携し、モバイルデバイスでも見栄えがします。
AffiliateWP が WordPress 管理画面の一部であるかのように見え、感じられるように、かなりの努力を払ってきました。必要なときにはそこにあり、不要なときには邪魔になりません。同様に、フロントエンドでは、AffiliateWP が WordPress テーマにシームレスに溶け込むように設計しました。
ウェブサイト全体でアフィリエイトに一貫したエクスペリエンスを提供することを目指しています。
このため、AffiliateWP は アフィリエイトエリアのスタイリングを最小限に抑え、ほとんどの作業をテーマの現在のスタイリングに依存しています。
多くのお客様にとって、アフィリエイトエリアのデフォルトのスタイリングは完璧です。リンクはテーマのリンクカラーで表示され、テキストはテーマのフォントで表示され、フォーム要素はテーマのフォームスタイリングを持ち、その他も同様です。しかし、アフィリエイトエリアがなぜあまり「派手」に見えないのか、カスタムカラースキーム、アイコン、アニメーション、カスタムフォントなどについて、時折サポートチケットを受け取ります！
「現在のデザインのトレンド」に基づいてアフィリエイトエリアをスタイリングすることもできましたが、お客様は私たちが下したデザイン上の決定に常に同意するとは限りません。そのため、スタイルが強く適用されたアフィリエイトエリアは、お客様の WordPress テーマと一致しない可能性が高く、AffiliateWP を使用している何千ものお客様を考えると、潜在的な問題が想像できるでしょう…
お客様は、AffiliateWP がテーマを「壊した」ため、「修正」するように要求するでしょう。
すべてを削除してやり直すよりも、クリーンなキャンバス（AffiliateWP のアフィリエイトエリアのような）にスタイリングを追加する方が良いです。さらに、一部のデザインのトレンドは翌年には時代遅れになり、アフィリエイトエリアを何度も再設計する必要に迫られるでしょう。
最初からシンプルに保つことにしたので、お客様は常に WordPress テーマに合った、見栄えの良いアフィリエイトエリアを持つことができます。カスタムデザイン要素を追加したい場合は、CSS スタイリングを行うだけです。
CSS によるスタイリング
CSS を教えることはこの記事の目的ではありませんが、幸いなことに、ウェブ上には 無数のチュートリアルがあります。実験するよりも良い学習方法はありませんが、始める前に、カスタム CSS コードをどこに配置するかを検討する必要があります。
子テーマに
カスタム CSS コードは、子テーマの style.css ファイルに追加できます。子テーマがない場合は、簡単に作成できます。子テーマに CSS を追加すると、親テーマが更新されてもカスタムスタイリングを失うことはありません。
カスタムプラグインに
WordPressリポジトリには、WordPress管理画面に直接CSSを貼り付けることで、カスタムCSSコードをサイトに追加できる無料プラグインがたくさんあります。テーマが更新されても、変更は失われません。例えば、次のようなプラグインがあります。Reaktiv CSS Builder。
使用する適切なCSSセレクターを見つける
アフィリエイトエリアをCSSでスタイル設定するには、何をスタイル設定するかを知る必要があります。これを行う最も簡単な方法は、ブラウザに組み込まれている開発者ツールを使用することです。これにより、アフィリエイトエリアの任意の要素にカーソルを合わせるだけで、使用する関連CSSセレクターを正確に見つけることができます。
各ブラウザには、開発者ツールへのアクセス方法がわずかに異なります。
Chrome
https://developer.chrome.com/devtools
Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
使用するCSSセレクターを見つけるもう1つの方法は、コードエディタでAffiliateWPのテンプレートファイルを確認することです。アフィリエイトエリアに関連するすべてのテンプレートファイルは、プラグインのtemplatesフォルダに含まれています。
dashboard.php
アフィリエイトダッシュボード
dashboard-tab-urls.php
アフィリエイトダッシュボードのURLタブ
dashboard-tab-stats.php
アフィリエイトダッシュボードの統計タブ
dashboard-tab-graphs.php
アフィリエイトダッシュボードのグラフタブ
dashboard-tab-referrals.php
アフィリエイトダッシュボードの紹介タブ
dashboard-tab-visits.php
アフィリエイトダッシュボードの訪問タブ
dashboard-tab-creatives.php
アフィリエイトダッシュボードのクリエイティブタブ
dashboard-tab-settings.php
アフィリエイトダッシュボードの設定タブ
アフィリエイトエリアのリンクを「タブ」のようにスタイル設定する
受け取ったリクエストの1つは、アフィリエイトエリアのリンクを「タブ」のようにスタイル設定することです。以下は、CSSスタイリングとデフォルトのWordPress TwentySixteenテーマを使用してこれを達成する方法の例です。
非常に重要なのは、すべてのテーマはユニークであるということです。リンクをタブに変換するためのサンプルコードを提供しましたが、お使いのテーマによっては追加のスタイリングが必要になる場合があります。TwentySixteenでは、物事を希望どおりに見せるために、さらにいくつかのスタイルを追加する必要がありました。これは、CSSコメントの最後に記載されています。
デフォルトのアフィリエイトエリアのリンクが、そのままの状態（TwentySixteenテーマを使用）でどのように見えるかを示します。
CSSスタイリングを追加した後、新しいタブがどのように見えるかを示します。
ご自身で試すには：
- CSS コードを表示します。
- CSSコード（<style>タグの間のすべて）をカスタムCSSプラグイン、または（前述のように）子テーマのstyle.cssファイルにコピー＆ペーストします。
- お楽しみください！
最後に、リポジトリのコードスニペットは便宜上プラグインとして設定されています。CSSコードを使用する別の方法は、表示されているファイルを保存し、サイトにプラグインとして直接インストールすることです。これを行う方法については、「スニペットの使用」セクションで説明しています。この方法で使用すると、CSSはアフィリエイトエリアにのみ読み込まれ、必要のない他のページには読み込まれないという利点があります。
少しの熱意と基本的なCSSの知識があれば、アフィリエイトエリアを好きなようにスタイル設定できます。CSSについてさらに詳しく知りたい場合は、チュートリアルをチェックして、さまざまなデザイン要素を試してみてください。きっと楽しくなるはずです！
スタイリングを楽しんでください！
良いチュートリアルですね。
アフィリエイトエリアを修正します 😀
ビジュアルコンポーザーの方がずっと簡単ですね、笑。
もちろんです！この問題には多くの解決策があります 🙂
エレメンターを使ってアフィリエイトエリアのデザインを編集することは可能ですか？
私もこの返信を待っています。アンドリューが今年中に答えてくれるかもしれません。ありがとう。
こんにちは、ページ自体（デフォルトでは「アフィリエイトエリア」と呼ばれます）を編集したいのですか、それともアフィリエイトエリア内の実際のリンクやフォームフィールドなどを編集したいのですか？
ページはエレメンターでデザインできますが、アフィリエイトエリア自体はエレメンターにカスタムCSSを追加して変更する必要があります。アフィリエイトエリアはブロックまたはショートコード（どちらを使用したいか選択できます）を使用して出力されるため、エレメンター内でカスタマイズできるものではありません。
プラグインのテンプレートをオーバーライドするにはどうすればよいですか？子テーマの下にどの階層でファイルを配置する必要がありますか？すべて試しましたが、うまくいきません。これはWPアフィリエイトエリアをカスタマイズするために絶対に不可欠なカスタマイズオプションですが、この記事ではまったく触れられていません。
このドキュメント記事を参照してください：http://docs.affiliatewp.com/article/118-modifying-template-files
ありがとう、
見事に機能しています。
この投稿がお役に立てて嬉しいです。
WPアフィリエイトプラグインに最適なWPテーマまたはテンプレートは何ですか？
AffiliateWPはどのWPテーマともうまく機能します。最適なテーマは、デザインと機能性が気に入ったものです。
サイドメニュータブに設定するには…？手伝ってもらえますか…？
こんにちは、Yupiさん。カスタム開発が必要な場合は、サードパーティのコンサルタントがお手伝いできます：https://affiliatewp.com/consultants/
プラグインとアドオンをBeaver Builderと互換性があるようにすることをお勧めします。
こんにちは、
これは良かったのですが、私の要件にはあまり合わなかったので、もう少し見栄えの良いものを作成しました（自分で言うのもなんですが 🙂
https://github.com/mattbingham/wordpress-affiliateswp/blob/master/style1.css
スクリーンショットはこちら：https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
レスポンシブなので、タブは小さいデバイスでは次の行にジャンプします。
大好きです！ありがとうございます！
このプラグインを購入したいと考えています。すでにテストして気に入っていますが、一つだけ質問があります。これは購入するかどうかを決める上で、私にとって最も重要な質問のようです。 デスクトップではプラグインは素晴らしく見えますが、携帯電話のような小さな画面では、アフィリエイトエリアのダッシュボードや統計などのタブをクリックすると、コンテンツが画面の下部にジャンプし、すべてのタブが終わった後に表示されます。私が望むのは、小さな画面で子テーマのCSSを使って、タブをクリックするとコンテンツと共に次のページにスライドし、メニューに戻るための戻るボタンを追加できるように編集できることです。
もし可能であれば購入します。
こんにちは、Tabishさん！
それは可能そうですが、あなたが望む最終結果を得るためには、CSSとHTML（スライディング効果を得るためにはJavaScriptも必要かもしれません）の知識が必要になります。
アフィリエイトエリアは、テンプレートファイルをWordPressの子テーマにコピーすることで、完全に好みに合わせてカスタマイズできます。
テンプレートファイルに関する詳細はこちらで確認できます：https://docs.affiliatewp.com/article/118-modifying-template-files
お役に立てれば幸いです！
こんにちは
アフィリエイトURLのタブの下にテキストを追加したいのですが、どうすれば可能ですか？
こんにちは、Saketさん、
いくつかの方法でこれを達成できます：
1. アフィリエイトエリアタブアドオンを使用して独自のカスタムURLタブを作成します：https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
タブにはWPページを使用できるため、カスタムテキストを含むあらゆるものを配置できます。その後、元のタブで提供される機能に似せるために、テキストの下に[affiliate_urls]ショートコードを配置できます。
このショートコードは、アフィリエイトエリアショートコードアドオンによって提供されます：https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. AffiliateWPによって提供されるdashboard-tab-urls.phpテンプレートファイルを使用してテキストを追加します。テンプレートファイルに関する詳細はこちら：https://docs.affiliatewp.com/article/118-modifying-template-files
3. affwp_affiliate_dashboard_urls_top アクションフックを介してテキストを追加します。これにはある程度の開発知識が必要になります。
2つのタブのコンテンツを組み合わせるにはどうすればよいですか？
例えば、アフィリエイトURLと統計情報を1つのタブの下に配置したいのですが。
ポータルをどのようにスタイル設定できますか？特に、クリエイティブページについてです。子テーマのCSSにflex-1、w-0 -mr -px クラスを追加しようとしましたが、何も変更されません。より良いクラスのアイデアを得るために、/wp-content/plugins/affiliatewp-affiliate-portal/templates/内に「creatives.php」はありません（ただし、それらがそれらのクラスであると確信しています）。
白い背景色を変更して、反転したアートが見えるようにしたいだけです。
こんにちは、Shaneさん、
アフィリエイトポータルアドオンには独自のカスタムスタイルがあるため、CSSをカスタマイズすることはできません。ポータルは、アクティブなテーマとのスタイリングの競合を避けるために、他のすべてのスタイルシートを削除します。
将��来的に、ブランドカラーに合わせやすくするために、基本的なカラーオプションを追加する予定です。ダークモードのサポートも検討しています。これにより、クリエイティブページの白い背景に対して、反転したアートが見やすくなります。
標準のアフィリエイトエリアはまだ選択肢として残っていますか？お好みに合わせてカスタマイズでき、オーバーライドできるテンプレートがあります（ポータルにはテンプレートがありません）。
ポータルに惹かれてPro版を購入しました。しかし、私のウェブサイトはダークモードで、本文のフォントカラーが白なので、機能しないことに気づきました。
過去7時間かけてCSSで色をカスタマイズしようとしていましたが、ここであなたのコメントを読みました。もうダメです
こんにちは。ログインページと登録ページのみを表示したいのですが、このログインページでユーザーが登録していない場合は登録リンクをクリックし、そうでない場合はアフィリエイトアカウントにログインするようにしたいのですが、どうすれば可能ですか？
AffiliateWPはデフォルトでログインフォームと登録フォームを同じページに表示します。ユーザーがログアウトしている場合、両方が表示されます。
記事に壊れたリンクがあります：https://github.com/AffiliateWP/affiliatewp-code-snippet-library/blob/master/affiliate-area/affiliate-area-custom-styling.php
ルーカスさん、ありがとうございます。リンクは更新されました。
CSSクラスはどこに配置できますか？