2Wordpressのロゴミクロデータのためのリッチスニペットテストツールを固定

以上 2 数年前、私はGoogleのリッチスニペットテストツールを通過しなかったWordPressのテーマの問題を解決する方法についての記事を掲載しました. Since then lots has changedWordPress and most themes have better support, HTML5とCSS3が到着しました, とGoogle, YahooとBingが集まって、ミクロに焦点を当てることにしました, schema.org経由. 当時マイクロフォーマットは、ページをマークアップする最も簡単な方法に見えました, およびテストツールは、これらのための最も包括的なサポートを持っていました. ミクロとワードプレスの変更への移行は、新しい記事を必要と: これがそうだ!

Instead of having lots of separate articles for different themes I’ve decided to try to provide all the information in 1 ガイド. これは、簡単に最新の状態に保つことができる, だけが存在することを意味し 1 central point for all requests and discussion. It also makes more sense as several of the steps are the same regardless of what theme you are using. I’m not going to cover all the optional extras in this article, just the basics to get your site to validate with the tool. Once you’ve managed that you should find adding extra markup is relatively easy. So lets get started

Add a link from your google profile to your site

あなたは上の表示されます my google+ profile that I have a public link to https://diymediahome.orgyou will need the same for your own site. Ideally you will need all of your authors to have a google profile that is linked to your site in the same way as this.

  1. にログインしてください google profile
  2. あなたが表示されるまでスクロール リンク section somewhere towards the bottom right of the page
  3. をクリックします 編集 リンク
  4. contributor to section click Add custom link
  5. テキストの右側のボックスを確認してください contributor to に設定されています 公共
  6. あなたのサイト名を入力してください (例えば. DIY メディアホーム) およびアドレス (例えば. https://diymediahome.org)
  7. [保存]をクリックします

あなたのサイトからGoogleプロフィールへのリンクを追加

Now we need to add a link from your author page to your google profile. あり 2 alternative ways to do this, I highly recommend using the Yoast この プラグイン.

  1. インストール ヨースト この プラグイン または add the following code to the functions.php file of your theme
    機能update_contactmethods( $contactmethods ) {
    // Add Google Profiles
    $contactmethods['googleplus'] = 'Google の';
    // Add Twitter
    $contactmethods[「ツイッター」] = _( 「Twitterのユーザー名 (@なしで)', 「Wordpressの -  SEO」 );
    
    返す$ contactmethods;
    }
    ADD_FILTER( 'user_contactmethods', 'update_contactmethods', 10, 1);
  2. Go to your author profile in the wordpress admin interface (覆いかぶさる ユーザー 左側のメニューで, 、をクリックして下さい あなたのプロフィール)
  3. Google+の field add a link to your google profile (例えば. https://plus.google.com/104657888470728381512 /)
  4. もしどちらかを確認してください, またはあなたの他のサイトの作成者は、同じことを行う, 自分のGoogleプロフィールへの各リンク
  5. 今, if you’re using the Yoast plugin, に行く この メニューを選択 タイトルやメタ情報, C言語でなめる ホームホーム ページの上部にあるとのメニュー Author highlighting pulldown box select the user you want to use as the author of the homepage
  6. If you’re insistent about not using the Yoast plugin you will need to manually add the following code to header.php (assuming you have one). Don’t forget to change my google profile url to yours. This code will use the post author’s google profile url if there is a valid one, およびデフォルトを使用します (あなた) 存在しない場合.
    <リンクREL ="著者" HREF ="<?PHPの$のジープラス= 'HTTPS://plus.google.com/115369062315673853712/posts '; もし ( is_singular() ) {グローバル$ポスト; $ジープラス= get_the_author_meta( 'googleplus', $ポスト>post_author );} エコーの$ジープラス; ?>"/>

Fix errors of a missing “更新した” フィールド

Most wordpress themes include information about when the post was published in the post information area, それが最後に更新されたときには非常に少数にも含まれ. これは残念です, because updated is required whereas published actually isn’t! それを追加することも簡単です, そして再び, がある 2 方法, 適切な方法で迅速なハックの方法. I recommend the proper way of course, but if necessary you can resort to the quick hack. We’re also going to change from microformats to microdata at the same time.

適切な方法

We’re going to add some additional information to post headers, both for search engines and for our visitors. 我々はポストのためにこれを行う必要があります, ページ, アーカイブとホームページ.

  1. We need to find the file that contains the code which generates the published link. This will almost certainly use the wordpress function get_the_date(). あなたのテーマファイルを検索することができます, or refer to theme specific details below where I have provided details for lots of themes
  2. We are going to check if the published and updated dates are the same. その場合、我々は単に余分に追加されます dateUpdated itemprop but if they are different we will output some extra text to the visitor
  3. We’re going to add the following (それが説明するように、それを変更)
    <?PHPの場合(get_the_date()== get_the_modified_date()): ?>
    
    //我々は、更新されたクラスが追加されただけで、元のコードを使用するつもりだ
    / /ここにあなたのテーマの元のコードを入れて
    / / =任意のクラスを削除する""
    //itemprop =を追加"datePublished dateCreated DateModified(更新日付)" to the HTMLの tag surrounding the get_the_date() 機能
    
    <?他のPHP: ?>
    
    //私達はちょうど更新された追加された日付と少しのコードを使用するつもりだ
    / /ここにしてから、以下のようにそれを変更するには、あなたのテーマの元のコードをコピーして
    / / =任意のクラスを削除する""
    //itemprop =を追加"datePublished dateCreated" to the HTMLの tag surrounding the get_the_date() 機能
    / /あなたはそれが以下のように表示したいラインに新しいHTMLタグに追加
    / /更新 <?PHPエコーget_the_modified_date() ?>
    
    <?PHP endifの; ?>
  4. You’ll either have to figure out the original theme’s code and edit it, or refer to the details for specific themes below.
  5. You may have to repeat this edit for multiple files

クイックハック

We’re going to cheat and supply the published date as the updated date, even if the post has actually been updated more recently. If the post has been updated then we’ll actually be supplying incorrect information, but it will still validate. It really is better to do it properly if possible, but if you’re insistent on doing it this way read on. 上記のように、我々はポストのためにこれを行う必要があります, ページ, アーカイブとホームページ.

  1. As above we need to find the file that contains the code which generates the published link. This will almost certainly use the wordpress function get_the_date(). あなたのテーマファイルを検索することができます, または私はテーマの多くの詳細を提供してきた以下の表を参照してください。
  2. 見つける HTMLの element that surrounds the date (しばしば、それが持っているでしょう class="published").
  3. Edit the element by removing the class and adding the following instead itemprop="datePublished dateCreated dateUpdated"
  4. 上記のように, you may need to repeat this edit in multiple files

Replacing the built-in microformats (because mixing rich snippet formats breaks things)

By default wordpress is still using microformat markup for comments, 悲しいことに、レシピのようなもののミクロデータのマークアップを破るように思われる. The best way to fix this is to remove the microformat markup and replace it with microdata markup. 残念ながら, the wordpress core functions that produce this markup don’t have a conveniently located filter or hook so this requires a bit of tinkering about.

Replacing vcard in the comments section

  1. What we’re going to do is use a comment callback to change the output of comments. Many themes already use a callback which we can modify, and for those that don’t we’ll add one based on the wordpress default
  2. Check if you theme already has a comment callbacksearch your theme files for the function wp_list_comments. それは、コードが含まれている場合 callback= また 'callback' => then it is using a callback which you should be able to find (probably in functions.php) by looking for the name of the callback function, =記号や矢印の後にその一部である, 例えば. wp_list_comments( array( 'callback' => 'twentyten_comment' ) ); また wp_list_comments('type=comment&callback=bones_comments');. そうでないならば、我々は追加することによって、1を追加する必要があります callback=diymh_comment また array( 'callback' => 'diymh_comment' ) ラインへ.
  3. If you needed to add a comment callback then you will need to add the following code to functions.php
    機能diymh_comment($コメント, $引数, $深さ) {
    $GLOBALS['コメント'] = $コメント; ?>
    <その <?PHPのcomment_class(); ?> ID ="リチウム方法<?PHP COMMENT_ID() ?>">
      <DIVのID ="コメント - <?PHP COMMENT_ID(); ?>">
    <DIVクラス="コメント·著者novcard">
    <?PHPエコーget_avatar($コメント,$サイズ= '48 ',$デフォルト= '<path_to_url>' ); ?>
    
    <?PHPのprintf(_('<=クラスを引用"FN">%S</引用する> <スパンクラス="言う">言う:</スパン>'), get_comment_author_link()) ?>
    </DIV>
    <?PHPの場合 ($コメント - >comment_approved == '0 ') : ?>
    <で><?PHPの_e('あなたのコメントは管理者の承認待ちです。 ") ?></で>
    <BR />
    <?PHP endifの; ?>
    
    <DIVクラス="どのようにメタcommentmetadata"><HREF ="<?PHPのエコーデータを元に戻し( get_comment_link( $コメント - >COMMENT_ID ) ) ?>"><?PHPのprintf(_('%2 $ sの%1 $ S'), get_comment_date(),  get_comment_time()) ?></a><?PHPのedit_comment_link(_('(編集)'),'','') ?></DIV>
    
    <?PHPのCOMMENT_TEXT() ?>
    
    <DIVクラス="返信">
    <?PHPのcomment_reply_link(array_merge( $引数, 配列(「深さ」=> $深さ, 'max_depthの' => $引数['max_depthの']))) ?>
    </DIV>
      </DIV>
    <?PHP
    }
  4. あなたは、このコードが持っていることがわかります class="novcard" instead of the original class="vcard".
  5. If your theme did have its own callback you need to find the callback function and replace any instances of class="vcard" ととも​​に class="novcard"

Replacing hfeed in the header

  1. 次, 我々はまた、任意のインスタンスを削除する必要があります class="hfeed", which are usually found in header.php. Replace all occurrences of hfeed ととも​​に nohfeed

Replacing hentry and title rich snippets

  1. We can replace these elements with a couple of neat functions added to functions.php
    機能diymh_replace_hentry($クラス){
    もし(($キー= array_search('hentry', $クラス)) !== falseを) $クラス[$キー]= 'nohentry';
    返す$クラス;
    }
    ADD_FILTER('post_class','diymh_replace_hentry');
    
    機能diymh_microdata_title($タイトル) {
        RETURN '<スパンitemprop ="名前">'$のタイトル。'</スパン>';
    }
    ADD_FILTER(「the_title ', 'diymh_microdata_title', 10, 2);

Adding the information type (例えば. Article, レシピ, その他) to the article header

  1. 最初の, decide what type of work you are publishingmost likely an article. のリストでご覧になれます schema.org
  2. 見つける HTMLの tag which contains the function post_class()
  3. コー​​ドを追加します。 itemscope itemtype="https://schema.org/Article" (replace article if you picked a different type of work)

最後に, to avoid breaking any styles

  1. You will need to edit your theme’s style.css and do a search/replace operation to replace all instances of .vcard ととも​​に .novcard とのすべてのインスタンスを置き換える .hfeed ととも​​に .nohfeed 私たちの変更は、いずれかの混乱をしないように CSS styling of our comments

Fixing any other errors

Any other changes necessary will be detailed on a per theme basis below. If you have a theme which you are unable to fix please post a comment. その自由なテーマなら、私はテーマ名を教えてください, それがプレミアムテーマですので、もし私がzip形式のコピーを送信する電子メールアドレスを提供することができます私に教えてください.

Theme specific details

Before just carrying out these edits don’t forget to carry out the steps to link your google profile and your site to each other, とヨーストをインストール この, 以上提供するコードを追加します.

 

二十テン 1.5

のfunctions.phpでこれを置き換える

機能twentyten_posted_on() {
のprintf( _( '<スパンクラス="%1$S">掲示された</スパン> %2$S <スパンクラス="メタ9月">沿って</スパン> %3$S ', 「twentyten ' ),
「メタプレップメタ分取作者,
はsprintf( '<HREF ="%1$S" タイトル="%2$S" REL ="ブックマーク"><スパンクラス="エントリーの日付">%3$S</スパン></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
はsprintf( '<スパンクラス="著者のvCard"><クラス="URLのFNのN" HREF ="%1$S" タイトル="%2$S">%3$S</a></スパン>',
get_author_posts_url( get_the_author_meta( 「ID」 ) ),
esc_attr( はsprintf( _( '%sの投稿をすべて表示'、, 「twentyten ' ), get_the_author() ) ),
get_the_author()
)
);
}

これとともに

機能twentyten_posted_on() {
もし(get_the_date()== get_the_modified_date()){
のprintf( _( '<スパンクラス="%1$S">掲示された</スパン> %2$S <スパンクラス="メタ9月">沿って</スパン> %3$S ', 「twentyten ' ),
「メタプレップメタ分取作者,
はsprintf( '<HREF ="%1$S" タイトル="%2$S" REL ="ブックマーク"><スパンitemprop ="datePublished dateCreated DateModified(更新日付)">%3$S</スパン></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
はsprintf( '<スパンクラス="著者のvCard"><itemprop ="著者" HREF ="%1$S" タイトル="%2$S">%3$S</a></スパン>',
get_author_posts_url( get_the_author_meta( 「ID」 ) ),
esc_attr( はsprintf( _( '%sの投稿をすべて表示'、, 「twentyten ' ), get_the_author() ) ),
get_the_author()
)
);
}
ほかに{
のprintf( _( '<スパンクラス="%1$S">掲示された</スパン> %2$S <スパンクラス="メタ9月">沿って</スパン> %3$S.  更新した <スパンitemprop ="DateModified(更新日付)">%4$S</スパン>.', 「twentyten ' ),
「メタプレップメタ分取作者,
はsprintf( '<HREF ="%1$S" タイトル="%2$S" REL ="ブックマーク"><スパンitemprop ="datePublished dateCreated">%3$S</スパン></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
はsprintf( '<スパンクラス="著者のvCard"><itemprop ="著者" HREF ="%1$S" タイトル="%2$S">%3$S</a></スパン>',
get_author_posts_url( get_the_author_meta( 「ID」 ) ),
esc_attr( はsprintf( _( '%sの投稿をすべて表示'、, 「twentyten ' ), get_the_author() ) ),
get_the_author()
),
get_the_modified_date()
);
}
}

のfunctions.phpでこれを置き換える

<DIVクラス="コメント - 著者のvCard">

これとともに

<DIVクラス="コメント·著者novcard">

header.phpの中で、これを交換してください

<DIVのID ="ラッパー" クラス="hfeed">

これとともに

<DIVのID ="ラッパー" クラス="nohfeed">

loop.php中 (3 インスタンス), ループsingle.php, ループpage.phpとループattachment.phpはこれを交換する

<DIVのID ="ポスト<?PHP the_ID(); ?>" <?PHPのpost_class(); ?>>

これとともに

<DIVのID ="ポスト<?PHP the_ID(); ?>" <?PHPのpost_class(); ?> itemscopeはアイテムタイプ="https://schema.org /記事">
二十セブンイレブン 1.5

coming very soon

Annotumベース 1.1.1

で 7 ファイル (機能特徴 - articles.php, 抜粋タイプ - article.php, 抜粋抜粋 - default.php, コンテンツタイプ - article.php, コンテンツの page.php, コンテンツのコンテンツdefault.php, コンテンツ物品pdf.php) 置き換えます

<記事 <?PHPのpost_class('記事フル'); ?>>

ととも​​に

<記事 <?PHPのpost_class('記事フル'); ?> itemscopeはアイテムタイプ="https://schema.org /記事">

 

あなた自身のいくつかの考えを持って? コメントに下記をお楽しみください! あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.

返信を残す

2 注釈