Blog × Play Under World

タグ: Wordpress

  • WordPressでエントリーの総数を表示する

    WordPressのエントリーの総数を表示するコードの紹介です。

    WordPressをちょちょいと使いやすくする15のスニペット

    コードは以下。

    [php]
    <?php $numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = ‘publish’ AND post_type = ‘post’");
    if (0 < $numposts)
    $numposts = number_format($numposts);
    echo $numposts.’ posts.’;
    ?>
    [/php]

    これでエントリーの総数が100件なら『100posts.』と表示されます。

    表示を変える場合は最後の
    [php]
    echo $numposts.’posts.’;
    [/php]
    を、
    [php]
    echo $numposts.’件のエントリーがあります。’;
    [/php]
    のようにすると『100件のエントリーがあります。』と表示されます。

  • WordPressで最終更新日時を表示する

    タイトル通り、Wordpressで最終更新日時を表示する方法です。

    WordPressで日時を表示させるときには『the_date()』もしくは『the_time()』タグが通常使われます。
    the_dateは、同じ日付で複数のエントリーがある場合、最初のエントリーにしか日付が表示されません。変わりに the_timeを使えば、各エントリーごとに日時を表示することが出来ます。

    では、投稿日時ではなく、最終更新日時を表示させたいときは？

    最終更新日時の表示方法

    最終更新日の表示には『the_modified_date』もしくは『the_modified_time』というテンプレートタグを使用します。

    the_modified_date

    Examples:

    [php]
    <?php the_modified_date(); ?>
    [/php]
    April 2, 2010
    デフォルトは the_modified_date(‘F j, Y’) を出力します。

    [php]
    <?php the_modified_date(‘F j, Y’); ?> at <?php the_modified_date(‘g:i a’); ?>
    [/php]
    April 2, 2010 at 10:08 pm
    日付＋時間。

    [php]
    <?php the_modified_date(‘j\<\s\u\p\>S\<\/\s\u\p\> M Y’); ?>
    [/php]
    2nd Apr 2010
    supタグで上付き文字を表現。

    the_modified_time

    Examples:

    [php]
    <?php the_modified_time(); ?>
    [/php]
    April 2, 2010
    デフォルトは the_modified_time(‘F j, Y’) を出力します。

    [php]
    <?php the_modified_time(‘g:i a’); ?>
    [/php]
    10:08 pm
    12時間表示(am/pm)

    [php]
    <?php the_modified_time(‘G:i’); ?>
    [/php]
    22:08
    24時間表示

  • WP-PageNaviを使わずナビゲーション表示

    WordPressの通常のページナビゲーションは「« Previous Page　Next Page » 」と表示されるだけで、今見ているページがエントリー全体の何ページ目で、あとどのくらいのエントリーがあるのかが直感的に把握できません。
    そこで、ユーザビリティ・アクセシビリティの向上という点で人気のあるのが『WP-PageNavi』というプラグインです。

    Example:

    Pages (17): [1] 2 3 4 » ... Last »

    今回はプラグインを使わずに直感的にわかりやすいページナビゲーションを表示させる方法です。

    WP-PageNavi を使わずにナビゲーション表示

    PageNaviの表示方法

    下記のコードを使用中のテーマ内のfunctions.phpに書き加えます。

    [php]
    <?php
    function bmPageNav() {
    global $wp_rewrite;
    global $wp_query;
    global $paged;

    $paginate_base = get_pagenum_link(1);

    if(($wp_query->max_num_pages) > 1):
    if (strpos($paginate_base, ‘?’) || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = ”;
    $paginate_base = add_query_arg(‘paged’, ‘%#%’);
    } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == ‘/’ ? ” : ‘/’) .
    user_trailingslashit(‘page/%#%/’, ‘paged’);;
    $paginate_base .= ‘%_%’;
    }
    $result = paginate_links( array(
    ‘base’ => $paginate_base,
    ‘format’ => $paginate_format,
    ‘total’ => $wp_query->max_num_pages,
    ‘mid_size’ => 5,
    ‘current’ => ($paged ? $paged : 1),
    ));
    echo ‘<p class="pageNav">’."\n".$result."\n</p>\n";
    endif;
    }
    ?>
    [/php]

    下記のコードをページナビゲーションを表示させたいテンプレートに書いて呼び出します。

    [php]
    <?php bmPageNav(); ?>
    [/php]

    以下は、CSSでのスタイリング例。

    [css]
    .pageNav {
    color: #2583ad;
    background:white;
    margin: 1em auto;
    line-height:2em;
    text-align:center;
    }

    a.page-numbers, .pageNav .current {
    color: #00019b;
    padding: 2px .4em;
    border:solid 1px #ccc;
    text-decoration:none;
    font-size:smaller;
    }

    a.page-numbers:hover {
    color:white;
    background: #328ab2;
    }

    .pageNav .current {
    color: white;
    background: #328ab2;
    border-color: #328ab2;
    font-weight:bold:
    }

    .pageNav .next, .pageNav .prev {
    border:0 none;
    background:transparent;
    text-decoration:underline;
    font-size:smaller;
    font-weight:bold;
    }
    [/css]

    プラグインを必要最小限にしたい方にオススメです。

  • WordPressにプラグインなしでパンくずリストを表示させる方法

    サイト訪問者がサイト内での現在位置を直感的に把握するのに便利なパンくずリスト。
    ユーザビリティ・アクセシビリティの向上という点においてパンくずリストを表示させることはスタンダードな要素になります。
    Wordpress の場合、『Breadcrumb NavXT』というプラグインを使って表示させることが可能ですが、今回はプラグインを使わずに表示させる方法です。

    Example:

    Demo » Parent Category I » Child Category II » A Post With Everything in it

    パンくずリストの表示方法

    下記のコードを使用中のテーマ内のfunctions.phpに書き加えます。

    [php]
    <?php
    function get_breadcrumbs(){
    global $wp_query;

    if ( !is_home() ){

    // Start the UL
    echo ‘<ul>’;
    // Add the Home link
    echo ‘<li><a href="’. get_settings(‘home’) .’">’. get_bloginfo(‘name’) .'</a></li>’;

    if ( is_category() )
    {
    $catTitle = single_cat_title( "", false );
    $cat = get_cat_ID( $catTitle );
    echo "<li> &raquo; ". get_category_parents( $cat, TRUE, " &raquo; " ) ."</li>";
    }
    elseif ( is_archive() && !is_category() )
    {
    echo "<li> &raquo; Archives</li>";
    }
    elseif ( is_search() ) {

    echo "<li> &raquo; Search Results</li>";
    }
    elseif ( is_404() )
    {
    echo "<li> &raquo; 404 Not Found</li>";
    }
    elseif ( is_single() )
    {
    $category = get_the_category();
    $category_id = get_cat_ID( $category[0]->cat_name );

    echo ‘<li> &raquo; ‘. get_category_parents( $category_id, TRUE, " &raquo; " );
    echo the_title(”,”, FALSE) ."</li>";
    }
    elseif ( is_page() )
    {
    $post = $wp_query->get_queried_object();

    if ( $post->post_parent == 0 ){

    echo "<li> &raquo; ".the_title(”,”, FALSE)."</li>";

    } else {
    $title = the_title(”,”, FALSE);
    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
    array_push($ancestors, $post->ID);

    foreach ( $ancestors as $ancestor ){
    if( $ancestor != end($ancestors) ){
    echo ‘<li> &raquo; <a href="’. get_permalink($ancestor) .’">’. strip_tags( apply_filters( ‘single_post_title’, get_the_title( $ancestor ) ) ) .'</a></li>’;
    } else {
    echo ‘<li> &raquo; ‘. strip_tags( apply_filters( ‘single_post_title’, get_the_title( $ancestor ) ) ) .'</li>’;
    }
    }
    }
    }

    // End the UL
    echo "</ul>";
    }
    }
    ?>
    [/php]

    下記のコードをパンくずリストを表示させたいテンプレートに書いて呼び出します。

    [php]
    <?php get_breadcrumbs(); ?>
    [/php]

    CSSでのスタイリングもしてありますので、デザインのカスタマイズも出来ます。

    [css]
    ul.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size:12px;
    }
    ul.breadcrumbs li {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
    }
    [/css]