著者によるDiviブログ投稿の色分け方法

公開: 2017-06-07

Diviの主な目標の1つは、Webサイトのすべての要素が見栄えがよく、ブログ投稿も例外ではないことを確認することです。ただし、常に改善の余地があり、作成者によるブログ投稿の色分けは、ユーザーがコンテンツをより効率的にナビゲートする方法を提供します（また、お気に入りのライターを特定することもできます）。

この記事では、Diviブログの投稿を色分けする理由と、2つの簡単な手順でそれを行う方法について詳しく説明します。新しいペンキのコートの時間です！

Diviブログ投稿のカラーコーディングを検討する必要がある理由

先に進む前に、Diviブログ投稿を色分けすることの意味を明確にしましょう。次のセクションでは、各ライターに、自分の投稿の背景として表示される色を割り当てる方法を説明します。この例では、自分の投稿を（ author1として）非常に魅力的な水色に割り当てました。

パステルカラーパレットを使用した配色例。

効果自体は比較的単純ですが、ライターを差別化するためのインパクトのある方法を提供します。ユーザーは、お気に入りの作家の新作を一目で簡単に見分けることができます。もちろん、作者の名前をより目立たせることも同じ効果があるかもしれませんが、視覚的にはそれほど印象的ではないかもしれません。

これに関するあなたの唯一の関心事はあなたの色の選択です。たとえば、このセクションの冒頭にあるスクリーンショットを見てください。Diviブログのインデックスは白い背景を使用しているため、著者の投稿には明るいパステルカラーを使用することにしました。別の配色を選択するとどうなるか見てみましょう。

はっきりと対照的なカラーパレットを使用したカラーコーディングの例。

もちろん、それは極端な例ですが、それは私たちのポイントを説明するのに役立ちます。投稿を色分けする場合は、必要に応じて適切なツールを使用して、パレットを慎重に検討する必要があります。対照的な色を使用して各投稿の違いを強調すると、ユーザーが作成者をすばやく特定するのに役立ちますが、ブログのスタイルに大混乱をもたらし、コンテンツを読みにくくする可能性もあります。

著者によるDiviブログ投稿の色分け方法（2ステップ）

これで理論について説明しました。次に、Diviブログ投稿を実際に色分けする方法に移ります。この機能を有効にするのに必要な手順は2つだけですが、開始する前に考慮すべき点がいくつかあります。

手始めに、WordPressサイトをバックアップすることをお勧めします。これは、変更を加えるときに常に良い考えです。次に、Diviの子テーマを作成する必要があるため、テーマが更新されても変更は残ります。

最後に、ステップ1にFTPクライアントを使用する必要があります。 FileZillaを使用しますが、他に好みのツールがある場合は、それを選択してください。

ステップ1：子テーマのfunctions.phpファイルにコードスニペットを追加する

これを行うには、FTPクライアントを開き、サイトのサーバーにログインする必要があります。そこから、 public_html / wp-content / themes /ディレクトリに移動し、子テーマのフォルダを見つけます。 public_htmlまたはルートフォルダは、ホストに応じて、 wwwまたはサイトのドメインにちなんで名付けられる場合があることに注意してください。

Diviの子テーマフォルダ。

子テーマのフォルダーを見つけたら、それを開いて、その中のfunctions.phpファイルを探します。次に、それを右クリックして、[表示/編集]というオプションを押します。

子テーマのfunctions.phpファイルを編集します。

これにより、デフォルトのテキストエディタでファイルを開くように求められます。子テーマを扱っているので、 functions.phpファイルは、親の関数をキューに入れることを除けば、ほとんど裸である必要があります。作成者のプレフィックスが付いた新しいクラスを作成者ごとに自動的に作成するスニペットを追加します。たとえば、Johnという名前のWordPressユーザーがいる場合は、 author-johnクラスを使用できます。これにより、後でCSSコードを追加できるようになります。

次に、 // END ENQUEUE PARENTACTION行の後に次のPHPスニペットを追加します。

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

変更を保存し、エディターを閉じれば完了です。扱っている作成者に関係なく、クラスを機能させるには小文字を使用する必要があることに注意してください。これは、ステップ2で重要になります。

ステップ2：DiviのカスタムCSSオプションを使用して各作成者の色を指定する

これで新しい機能の準備が整いました。次のステップは、各作成者の色を設定することです。 Diviでは、カスタムCSS機能を使用してこれを行うことができます。これは、そこに追加するコードがテーマ全体に影響するためです。それを見つけるために、ページの末尾にカスタムCSSボックスまでスクロールし、ディビ>テーマオプション]タブにWordPressのダッシュボードとナビゲートするために行きます：

DiviのカスタムCSSオプション。

著者ごとに、このフィールド内にCSSの新しい行を追加する必要があります。たとえば、ユーザー名がauthor1の作成者がいる場合、特定の色を設定する方法は次のとおりです。

.author-author1 {background-color: #C1F3FA !important;}

ユーザー名に関係なく、クラスに作成者プレフィックスを追加する必要があることに注意してください。背景色を指定した後、コードが！importantであることを宣言する必要もあります。簡単に言えば、これによりコードの重みが増し、発生する可能性のある競合が上書きされます。これがないと、この機能は機能しません。

最後の例を1つ見てみましょう。ここでは、2人の著者に異なる色を割り当てます。 DiviカスタムCSSフィールドに追加したコードは次のとおりです。

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

これがフロントエンドから見たものです。

シンプルなカラーパレットを使用したカラーコーディングの例。

色の選択は別として、Diviブログの投稿に加えることができる他の微調整があります。たとえば、ブログの抜粋の長さを微調整したり、投稿の「カード」のスタイルを複数の方法で設定したりできます。あなたの主な目標はあなた自身のブログにぴったりのスタイルを見つけることであるべきです、それでDiviで遊んでそしてそれが何ができるか見ることを恐れないでください！

結論

著者によるブログ投稿の色分けは、ユーザーがコンテンツをはるかに簡単にナビゲートするのに役立つシンプルな機能です（特に、大規模なアーカイブがある場合）。さらに、多くのユーザーは、お気に入りの著者の投稿を色だけで認識できることを高く評価するでしょう。

ファイルの調整を開始する前に、サイトをバックアップして子テーマを設定することを忘れないでください。そうすれば、変更は今後も保持されます。それが完了したら、作成者ごとにDiviブログ投稿を色分けするために従う必要のある2つの手順は次のとおりです。

子テーマのfunctions.phpファイルを変更します。
DiviのカスタムCSSオプションを使用して、各作成者の色を指定します。

著者によるDiviブログ投稿の色分け方法について質問がありますか？ 下のコメントセクションで質問してください！

RaZZers / shutterstock.comによる記事のサムネイル画像。