アフィリエイトダッシュボードに個人的なメッセージを追加したり、デザイン要素を調整したりなど、AffiliateWPを自分のニーズにぴったり合うようにカスタマイズしたいと思ったことはありませんか？サイトに影響を与えることなくAffiliateWPをカスタマイズする方法をお探しなら、このガイドがステップバイステップで解説します。
WPCode プラグインの助けを借りて、カスタム コード スニペットをすばやく安全に 1 か所に追加する方法を紹介します。
カスタム コードを追加する理由
カスタムコードを追加することで、AffiliateWPを自分好みにカスタマイズできます。スタイルを変更したり、アフィリエイトエリアをパーソナライズしたりしたい場合でも、カスタムコードスニペットを使えば簡単に変更を反映できます。ただし、プラグインファイル内のコードを直接変更するのはリスクを伴います。何か問題が発生した場合、サイトにアクセスできなくなる可能性があります。
代わりに、WPCode と呼ばれるコード管理ツールを使用するより安全なアプローチを使用します。このツールを使用すると、メインファイルはそのまま維持され、カスタム コード スニペットをすべて 1 か所で整理してアクティブ化できます。
WPCodeプラグインを使用してコードスニペットを追加する
最初のステップはWPCodeプラグインをインストールすることです。これにより、コアファイルを編集することなく、コードスニペットを簡単に追加・管理できます。WPCodeには、カスタムコードを安全に追加するための専用エリアが用意されているため、すべての変更を1か所に整理できます。
WPCode を設定するには、WordPress ダッシュボードに移動し、 「プラグイン > 新規追加」に移動して、 WPCodeを検索します。
見つかったら、 「今すぐインストール」をクリックし、 「アクティブ化」をクリックします。
プラグインを有効にすると、ダッシュボードに「コード スニペット」という新しいメニュー項目が表示されます。
ここでカスタム コードを追加および管理します。
PHPコードの追加
AffiliateWP に最初のカスタムコードスニペットを追加してみましょう。アフィリエイトエリアの上部に、アフィリエイトのエンゲージメントを高めるためのウェルカムヘッダーを追加したいとします。これは PHP スニペットの最適な使い方です。
WordPressダッシュボードで、 「コードスニペット」に移動し、 「新規追加」を選択します。プラグインをインストールしたばかりなので、リストは空になっています。
カスタムコードを入力できる画面が表示されます。ここで、独自のコードを追加するか、あらかじめ用意されているライブラリからコードスニペットを選択できます。「カスタムコードを追加（新しいスニペット）」にマウスを合わせ、 「カスタムスニペットを追加」ボタンをクリックします。
コードの種類を選択できる画面が表示されます。ここでは「PHP スニペット」を選択してください。
まず、スニペットに「アフィリエイト エリアのカスタム見出し」などのタイトルを付けます。これは、このスニペットの目的を思い出すのに役立つタイトルです。
コード ボックスに次の PHP コードを貼り付けます。
// Add a custom heading to the Affiliate Area
function custom_affiliate_area_heading() {
echo '<h2>Welcome to Your Affiliate Dashboard!</h2>';
}
add_action('affwp_affiliate_dashboard_top', 'custom_affiliate_area_heading');
このコードスニペットは、アフィリエイトエリアの上部に表示される見出しを追加します。スニペットが自動的に実行されるようにするには、挿入オプションで「自動挿入」を選択してください。
完了したら、アクティブメニューを切り替えて、スニペットの保存ボタンをクリックします。
アフィリエイト エリアに移動すると、アフィリエイトを歓迎するカスタムの見出しが表示されます。
カスタムCSSの追加
では、アフィリエイトエリアのナビゲーションタブの色を調整したいとしましょう。そのためには、テキストの色を変更するCSSスニペットを使用し、ナビゲーションタブをサイトのデザインに合わせます。
WPCode ダッシュボードで、 「新規追加」をクリックして別のスニペットを作成し、「CSS スニペット」を選択します。
コード ボックスに次の CSS コードを貼り付けます。
/* Change text color for all navigation tabs */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab a {
color: #333; /* Default text color */
}
/* Change text color for the active tab */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab.active a {
color: #3498db; /* Active tab text color */
font-weight: bold; /* Optional: make active tab text bold */
}
次に、「挿入」を「自動挿入」に設定して、AffiliateWPのナビゲーションタブ全体にスタイルを適用します。スニペットを保存して有効化すると、アフィリエイトエリアのナビゲーションリンクが更新された色で表示されます。
これで完了です！PHPとCSSスニペットを追加してAffiliateWPをカスタマイズし、アフィリエイトにとってよりパーソナライズされたエクスペリエンスを実現できました。WPCodeを使用すると、このプロセスは安全かつシンプルになり、コアファイルの編集や複雑なコード変更の管理に煩わされることはありません。