GeneratePress テーマに作成者ボックスを追加する方法。 【2021年】
公開: 2021-01-24追加のプラグインをインストールせずに、Generatepress テーマに作成者ボックスを追加できることをご存知ですか?
そのため、ブロガーを支援するために、Generatepress テーマの要素機能を使用して作成者ボックスを追加する方法に関する詳細なガイドを用意しました。
WordPress に作成者ボックス プラグインを追加して、作業を簡単にしない理由を多くの人が尋ねていることを知っています。 追加のプラグインをインストールすると、ウェブサイトの速度に影響を与える可能性があるため. カスタム HTML および CSS コードを使用して、ネイティブの Generatepress Element 機能を使用して作成者ボックスを生成することをお勧めします。
注: このトリックは、Generatepress プレミアム プラグインが WordPress Web サイトにインストールされている場合にのみ使用できます。
ウェブサイトに著者ボックスが必要な理由
ブログ投稿の最後に作成者ボックスを追加すると、読者や Google、Bing などの検索エンジンが記事の背後にいる人物を知るのに役立ちます。
読者と著者の間に良好な関係と信頼を築き、インターネット コミュニティで権威を築くのにも役立ちます。
EATアルゴリズムについて知っていますか？ Google で上位にランクインするには、専門知識、権威、信頼性を構築してブランドを作成する必要があります。これはまさに EAT の略です。 Author Boxはそれを実現するための第一歩です。
generatePress テーマに著者ボックスを追加する手順。
Generatepress テーマに作成者ボックスを追加する前に、WordPress で基本的な設定を行う必要があります。
1. プロフィール写真と著者の説明を追加する
WordPress ダッシュボードに移動し、 [ユーザー]セクションをクリックします。 ここで、ユーザー名のすぐ下にある [編集] ボタンをクリックします。
下にスクロールすると、「 About Yourself 」というオプションが表示されます。 ここで、「 Biographical Info 」に著者の説明を書き、そのすぐ下にプロフィール写真を設定します。
注:簡単な方法で、[作成者] ボックスに会社概要ページへのリンクを追加することもできます。 伝記情報に、この形式でリンクを貼り付けます。
<a href="https://key2blogging.co/about-us/">私たちについてのページ</a>
この上、 の作成者ボックスにリンクを使用してアンカー テキストを簡単に追加できます。 GeneratePress テーマ。
Gravatar を追加していない場合は、下のリンクをクリックして追加できます。
WordPress に記載されているメール アドレスを使用してアカウントを作成し、そこにプロフィール画像をアップロードする必要があるGravatar Web サイトにリダイレクトされます。 プロフィール写真が WordPress アカウントに自動的に取得されます。
2. Elementモジュールを有効化
Element モジュールを有効にするには、 [外観] > [GeneratePress] > [Elements] > [Activate]に移動します。
すでにそれを行っている場合は、3 番目のステップにスキップできます。
3. 新しいフック要素を作成する
[外観] セクションをクリックすると、[要素] というオプションが表示されるので、それをクリックします。 「 Add new Element 」をクリックして、 Hookを選択します。
4. タイトルを「Author Box」に設定し、HTMLコードを貼り付けます
タイトルを Author Box に設定し、以下の HTML コードをコード エディターに貼り付ける必要があります。
以下のコードをコピーします
<div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>5.フック設定のセットアップ
コードを貼り付けた後、フック設定をセットアップする必要があります。 フックオプションで「 generate after content 」を選択し、「 Execute PHP 」をクリックして優先度を「 20 」に設定します。
6.表示ルールの設定
次に、設定のすぐ右にある [表示ルール] をクリックします。 次に、[場所] で [ All singular ] を選択し、[除外] タブで [ Frontpage ] を選択します。
これでフックの設定は完了です。 というわけで、公開ボタンを押してください。
7.CSSコードを追加する
次に、CSS コードを使用して作成者ボックスを設計する必要があります。 そのためには、外観 >> カスタマイズ >> 追加 CSSに移動し、以下のコードを貼り付けて、公開ボタンを押します。
CSS コードをコピーします。
.author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }おめでとうございます。プラグインなしで、Generatepress テーマに作成者ボックスを追加できました。
ビデオガイド:
注: Generatepress テーマの無料版を使用している場合は、プラグインを使用して作成者ボックスを追加する必要があります。
結論
これで、WordPress の Generatepress テーマに作成者ボックスを追加するための段階的なプロセスについて説明しました。 ご不明な点がありましたら、コメント セクションで質問するか、 Twitter で連絡してください。
このガイドが気に入ったら、ブログ コミュニティと共有して、その努力に感謝してください。 ありがとうございました。
関連項目: ブロガー向けの便利な Chrome 拡張機能トップ 10