ワードプレスの各項目にユニークなスタイルを与える方法

パー ブレアJersyer | WordPressのチュートリアル

ブログで記事を公開しているウェブサイトに出会ったことはありますか？

一部のWebサイトでは、カスタムの背景で強調表示された記事が取り上げられていますが、他のWebサイトでは、各カテゴリの投稿が独自の外観である場合があります。 すべてのWordPress投稿をカスタマイズする方法を常に学びたいと思っていたなら、あなたは正しい場所に来ました。ワードプレスの各記事に独自のスタイルを与える方法

このチュートリアルでは、WordPressの各記事を異なる形にする方法を示します。

ただし、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

レマルク：このチュートリアルでは、WordPressにカスタムCSSを追加する必要があります。 また、検査ツールを使用する必要があります。 CSSとHTMLの知識が必要です。

WordPressの項目の個々のスタイルを与えます

WordPress は、Web サイトのさまざまな要素にデフォルトの CSS クラスを追加します。 あ ワードプレスのテーマ 標準互換には、本文、投稿、ページ、ウィジェット、メニューなどの CSS クラスを追加するために WordPress が必要とするコードが必要です。

ガイドもご覧ください パーマリンク：あなたのブログへのリンクをカスタマイズする方法

WordPressの主な機能は「 post_class（） テーマでこれらのデフォルトのCSSクラスを記事に追加する場所をWordPressに指示するために使用されます。

Webサイトにアクセスし、ブラウザーで検査ツールを使用すると、投稿ごとに追加されたこれらのクラスを確認できます。

クラスcssワードプレスダッシュボード

以下は、ユーザーが表示するページに基づいてデフォルトで追加されるCSSクラスです。

  • .post-ID
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category ID
  • .category名
  • .TAG名
  • .format- {サイズ名}
  • {.type-ポスト型名}
  • ポストサムネイルを.has
  • .post-パスワード必要
  • .protectedバイ・パスワード

表示例は次のようになります。

それぞれのCSSクラスを使用して、WordPressの各出版物を個別にカスタマイズできます。

また読みます： この週末のブログあなたのWordPressを改善する方法

たとえば、個々のパブリケーションを編集する場合、カスタムCSSでpost-idクラスを使用できます。

.post-412 {背景色：#FF0303。 色：#FFFFFF; }

投稿IDを自分の投稿IDと一致するように変更することを忘れないでください。

ワードプレスの記事の外観をカスタマイズする

別の例を見てみましょう。

今回は、「ニュース」と呼ばれる特定のカテゴリに投稿されたすべての記事を取り上げます。

ガイドをご覧ください WordPressブログにカスタムCSSを追加する方法

これを行うには、次のカスタムCSSをテーマに追加します。

.categoryニュース{フォントサイズ：18px。 フォントスタイル：イタリック; }

このCSSは、カテゴリ「 時事性 '。

post_class機能（）

テーマ開発者は関数を使用します post_class（） 投稿クラスを追加する場所をWordPressに指示します。 通常は「article」タグにあります。

機能 post_class（） デフォルトでWordPressによって生成されたCSSクラスをロードするだけでなく、独自のクラスを追加することもできます。

発見 あなたのブログのコンテンツスクレイパーを保護する方法

あなたによると ワードプレスのテーマpost_class() 関数は、single.php ファイルまたはテンプレート ファイルにあります。 通常、コードは次のようになります。

" >>

次のような属性を持つ独自のカスタムCSSクラスを追加できます。

" >>

post_classクラスは、それぞれのデフォルトCSSクラスをカスタムCSSクラスとともに出力します。

複数のCSSクラスを追加する場合、それらを配列として定義し、post-class（）関数で使用できます。

" >>

著者に応じて異なるスタイルの記事を表示する

posts_class関数によって生成されるデフォルトのCSSクラスには、CSSクラスとして作成者の名前が含まれていません。

著者に基づいて各投稿のスタイルをカスタマイズする場合は、最初に著者の名前をCSSクラスとして追加する必要があります。

また読みます： CSSアニメーションのワードプレスを追加する方法

次のスニペットを使用してこれを行うことができます。

" >>

このコードは、ユーザー名をCSSクラスとして追加します。 ユーザー名は、WordPressで使用されるURLと互換性のある名前です。 スペースがなく、すべての文字が小文字であるため、CSSクラスとしての使用に最適です。

ガイドもご覧ください WordPressブログにカスタムCSSを追加する方法

上記のコードは次のように表示されます：

これで、カスタムCSSで「.peter」を使用して、その特定の作成者によるすべての投稿を変更して、表示が異なるようにすることができます。

.peter {背景色：#EEE。 国境：固体1px #CCC。 }

コメントに基づいて記事の投稿をカスタマイズする

コメントに基づいてランク付けされることがある人気記事のあるウィジェットを備えたWebサイトを見たことがあるかもしれません。 この例では、コメントの数を使用して異なるスタイルを作成する方法を示します。

私たちを発見 コメントを管理するための10のプレミアムWordPressプラグイン

まず、コメントの数を取得し、クラスを関連付ける必要があります。

コメント数を取得するには、ファイルに次のコードを追加する必要があります。 ワードプレスのテーマ。 このコードは WordPress ループに入ります。タグの直前に追加できます。 。

承認済み; if（$ my_comment_count <10）{$ my_comment_count = 'new'; } elseif（$ my_comment_count> = 10 && $ my_comment_count <20）{$ my_comment_count = 'ermerging'; } elseif（$ my_comment_count> = 20）{$ my_comment_count = '人気'; }？>

このコードは、投稿されたパブリケーションのコメント数をチェックし、アカウントに基づいて値を割り当てます。 たとえば、10コメント未満のメッセージには、「 新製品 20未満が呼び出されます 新興の 「そして、20コメント以上のものはすべて」 人気のあります '。

次に、CSSクラスをpost_class関数に追加する必要があります。

" >>

これにより、各投稿のコメント数に基づいて、新しい人気のあるCSSクラスがすべての記事に追加されます。

また、私たちの記事を読んでください オンラインで文書に署名するための6 WordPressプラグイン

人気に基づいてスタイルCSSにカスタムCSSを追加することもできます。

.new {ボーダー：固体1px #FFFF00;} .emerging {ボーダー：1px #FF9933破線;} .popularを{ボーダー：1px #CC0000破線;}

境界線を追加するだけですが、必要に応じてCSSルールを追加できます。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトへの接続を最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 究極のメンバーシッププロ

Ultimate Membership Proは素晴らしいです WordPressのプラグイン サブスクリプションのプレミアムとコンテンツの制限。 排他的なアクセス レベルを作成することで、パッケージ (無料または有料) に従ってユーザーを管理できます。

Ultimate Membership Pro WordPress Membership WordPressプラグイン

したがって、次のことが可能になります。 ウェブサイトのすべてのコンテンツを保護する、またはその一部です。 たとえば、コース、レッスン、ページ、製品、カテゴリ、画像などになります...

私達の記事も読んで サムネイルを作成するための4プレミアムWordPressプラグイン

その主な機能は次のとおりです。コンテンツ保護、複数レベルのアクセス、複数の支払いゲートウェイのサポート- PayPal、Authorize.net、 ストライプ、2CheckOut、銀行振込、 コンテンツの部分的な保護、そしてもっと…

ダウンロード | デモ | ウェブホスティング 

2.スライダー Facebook

どのようにスライダー Facebook あります WordPressのプラグイン 訪問者にあなたのウェブサイトにコメントを残すオプションを提供するプレミアム。 このモダンで邪魔にならないコメント ボックスでは、 WordPressのプラグイン Facebook ソーシャル ネットワークとの Web サイトの統合を拡張する Like Box と Fan Page Wall 機能を提供します。Facebookワードプレスソーシャルプラグインワードプレスのスライダー方法

プラグインは、Webサイトの容量を拡張するためのさまざまな機能も提供します。たとえば、 いいねセクション （「LikeBox」）またはファン専用のページ（「FanPageWall」）。

発見も FacebookとDisqusのコメントを段階的に読み込む方法

Facebook Comment Sliderにはすでに「いいね」ボタンと「共有」ボタンがあり、どの投稿やページにも表示できるため、投稿やページに「いいね」ボタンや「共有」ボタンを埋め込む必要はありません。 訪問者は「いいね」ボタンを見つけるでしょう、 「共有」ボタン Facebookスライダーのコメントボックス。 彼らは明らかに自分のFacebookアカウントを使用します。

また、シェイク効果のオン/オフ、時間を設定することができます。

ダウンロード | デモ | ウェブホスティング

3。 ログイン忍者

このプレミアムWordPressプラグインを使用すると、ログインページをカスタマイズできます。 カスタマイズするだけではありません ログインフォーム。 ページの色の変更、背景画像の追加、ロゴの追加などにより、ページ全体をカスタマイズできます。忍者ログインワードプレスプラグイン

その他の機能は次のとおりです。 captchaによるログインおよび登録フォームの保護、ブルートフォースによって攻撃するIPの自動および手動の禁止、すべての接続関連アクティビティの詳細なログ、役割とユーザー名に基づくユーザーのリダイレクト、 電子メール通知の受信 すべての接続イベント、使いやすいグラフィカルインターフェイス、詳細なドキュメントなど。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここは ！ これでこのチュートリアルは終了です。WordPressブログの記事の表示をカスタマイズできるようになることを願っています。 この分野で懸念や提案がある場合は、 議論するコメントセクション.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

... 

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.