web-dev-qa-db-ja.com

faviconを使ったコンパクトなpingbackリスト

Pingbackとtrackback（ping）を有効にしたブログでは、リンクテキストと外部サイトのfaviconをリンクだけでコンパクトなリストで表示したい。日付なし、テキストなし。

どうやってやるの？

theme-developmentwp-list-commentspingbacksfaviconicon
1
fuxia

最初にやること：通常のコメントとpingbackを分けてください。 comments.phpで両方のtypeパラメータを設定します。

<ol class="commentlist">
<?php
// show regular comments
wp_list_comments(
    array (
        'type'     => 'comment',
        'style'    => 'ul'
    )
);
?></ol>

<ol class="pinglist">
<?php
// show pingbacks and trackbacks, short: "pings"
wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul'
    )
);
?></ol>

今、問題があります。承認されたpingがない場合は、空の<ol>を印刷したくないでしょう。

それでは、単純なpingカウンタを使用しましょう。

/**
 * Count amount of pingbacks + trackbacks for a post.
 *
 * @param int $post_id Post ID for comment query. Default is current post.
 * @return int
 */
function t5_count_pings( $post_id = NULL )
{
    $pings    = 0;
    $comments = FALSE;

    if ( NULL !== $post_id )
    {
        $comments = get_comments(
            array (
                'post_id' => $post_id, # Note: post_ID will not work!
                'status'  => 'approve'
            )
        );
    }
    elseif ( ! empty ( $GLOBALS['wp_query']->comments ) )
    {
        $comments = $GLOBALS['wp_query']->comments;
    }

    if ( ! $comments )
        return 0;

    foreach ( $comments as $c )
        if ( in_array ( $c->comment_type, array ( 'pingback', 'trackback' ) ) )
            $pings += 1;

    return $pings;
}

それでは、pingリストを条件付きにラップします。

if ( $num = t5_count_pings() )
{
?>
<h2 id="pingbacks"><?php
    printf( _n( 'One pingback', '%d pingbacks', $num, 't5_theme' ), $num );
?></h2>
<ol class="pinglist">
<?php
wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul'
    )
);
?></ol>
<?php
}

t5_count_pings()が0を返す場合、PHPはFALSEのように読み、リストコンテナは表示されません。

今フォーマット。 wp_list_comments()はパラメータcallbackを受け入れます、そして我々はそれを使用して各pingの内容をレンダリングすることができます。私の名前をt5_list_pings_callback()にして次のように追加します。

wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul',
        'callback' => 't5_list_pings_callback'
    )
);

この関数の内容はとても簡単です。

/**
 * Callback for wp_list_comments( array ( 'type' => 'pings' ) )
 *
 * @param  object $comment
 * @return string
 */
function t5_list_pings_callback( $comment )
{
    $url     = esc_url( $comment->comment_author_url );
    $icon    = t5_external_favicon( $url );
    $name    = esc_html( $comment->comment_author );

    print "<li><a href='$url'>$icon $name</a>";
}

2つの重要な注意事項

  1. 最後の</li>を追加しないでください。 WordPressはあなたのためにそれをするでしょう。
  2. 関数t5_external_favicon()が必要です。 Googleに聞いてみましょう。

。

/**
 * Get an img element for a favicon from Google.
 *
 * @param  string $url
 * @param  string $class class attribute
 * @param  int    $size
 * @param  string $alt
 * @return string
 */
function t5_external_favicon( $url, $class = 'icon', $size = 16, $alt = '' )
{
    $Host     = parse_url( $url,  PHP_URL_Host );
    $icon_url = "https://plus.google.com/_/favicon?domain=$Host";

    return "<img class='$class' width='$size' height='$size' alt='$alt' src='$icon_url' />";
}

空のalt属性を使います。なぜなら、画像は実際には単なる装飾だからです。また、widthとheightは常に設定する必要があります。サイトによっては非常に大きなアイコンを使用している場合があります。

以上です。これがwpkrauts.comの外観です。

screenshot

3
fuxia