WordPressでは、クエリ結果(≒表示すべき記事の情報)を、$wp_queryと$wp_the_queryの２つの変数で管理しています。
この２つの違いは下記のとおりです。

メインクエリの結果：$wp_the_query
現在処理しているクエリ結果: $wp_query

// カテゴリ1の記事最新5件を検索
// この時点では、$wp_the_queryと$wp_queryの内容は同じ
query_post('cat=1&order=DES&number=1'); 

// 取得した記事をすべて処理するまで繰り返し
wihle( have_posts() ) {
    // 検索した結果からデータを1レコードフェッチして、作業中記事を$wp_queryグローバル変数にセット
    // この時点で、$wp_the_queryと$wp_queryの内容は異なる。
    the_post();

    // セットされた$wp_queryグローバル変数より、記事のタイトルを取得する
    echo the_title();
}

wp_reset_query();   // wp_queryの内容を$wp_the_queryに戻す

WordPressでは、?p=123のような形でブラウザからのリクエストパラメータ(クエリストリング)を受け付けることができます。
標準インストールされたWordPressが処理できるパラメータの一覧は下記のとおりです。

m
p
posts
w
cat
withcomments
withoutcomments
s
search
exact
sentence
calendar
page
paged
more
tb
pb
author
order
orderby
year
monthnum
day
hour
minute
second
name
category_name
tag
feed
author_name
static
pagename
page_id
error
attachment
attachment_id
subpost
subpost_id
preview
robots
taxonomy
term
cpage
post_type
embed

add_filter('query_vars'、function ( $keys ) {
    $keys[] = "custom_key";
    return $key;
});

WordPressではver.4.7から動画ヘッダーというカスタムビデオヘッダの機能があります。
これを使用すると、記事設置された動画に対する機能ですが、動画が自動で再生開始されていまします。

これを自動再生させたくない場合は、以下のJavaScriptコードをページに記述しておけばよいです。
仕組みとしては、ページがロードされたときにwp-custom-header-videoのidがあるタグを探し、autoplay=”false”に設定を差し替えています。

$( document ).ready( function() {
    $( document ).on( 'wp-custom-header-video-loaded', function() {
        $("#wp-custom-header-video").attr('autoplay',false);
    });
});

WordPressを使っているとダッシュボードにちょっとした情報を表示したくなる場合があります。

そこで、WordPressにログインした直後に表示される管理画面へリンク集を設置できるプラグインを作成しました。実際は、指定されたHtmlを表示しているだけなので、リンク集に限らず好きな情報を出力できます。

「プラグインの自作」と書くと敷居が高そうですが、function.phpに2つ処理を書くだけなので割と簡単に作成できます。phpのプログラムを書いた人であればすぐわかるレベルですし、プログラムの経験がなくてもhtmlさえ分かれば本記事を元に好きな内容を表示させるようなカスタマイズも簡単です。

Widgetプラグインの作成方法

プラグインのプログラムを準備する

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

// プラグインを登録
add_action('wp_dashboard_setup', 'nano_dashboard_widgets');
function nano_dashboard_widgets() {
    wp_add_dashboard_widget('nano_dashboard_widgets', 'リンク集',  'nano_dashboard_widget_linkList');
}

// リンク集を表示するウィジット
function nano_dashboard_widget_linkList() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://www.google.com/analytics/web">Googleアナリティクス</a>
            </li><li>
                <a href="https://affiliate.amazon.co.jp/">Amazonアソシエイト</a>
            </li><li>
                <a href="https://affiliate.rakuten.co.jp/reports/">楽天アフィリエイト</a>
            </li><li>
                <a href="http://pub.a8.net/a8v2/asResultReportAction.do?action=ud">A8.net</a>
            </li><li>
                <a href="https://www.valuecommerce.ne.jp/">バリューコマース</a>
            </li><li>
                <a href="http://admax.shinobi.jp/">忍者AdMax</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

作ったプラグインを有効化する

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

ダッシュボードに表示されていることを確認する

ダッシュボードに複数のウィジットを表示させたい時は?

<?php
/*
Plugin Name: 0001_nano-admin-dashboardWidget
Copyright: nano
Description: ダッシュボードにリンク集を出力します
Version: 1.0.0
*/

// プラグインを登録
add_action('wp_dashboard_setup', 'nano_dashboard_widgets');
function nano_dashboard_widgets() {
    wp_add_dashboard_widget('nano_dashboard_widgets',  'リンク集(分析系)',   'nano_dashboard_widget_linkList');
    wp_add_dashboard_widget('nano_dashboard_widgets2', 'リンク集(アフィリエイト系)',  'nano_dashboard_widget_linkList2');
}

// 分析系リンク集を表示するウィジット
function nano_dashboard_widget_linkList() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://www.google.com/analytics/web">Googleアナリティクス</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

// アフィリエイト系リンク集を表示するウィジット2
function nano_dashboard_widget_linkList2() {
    $htmlStr = <<<EOT
        <ul style="line-height:1.5rem">
            <li>
                <a href="https://affiliate.amazon.co.jp/">Amazonアソシエイト</a>
            </li><li>
                <a href="https://affiliate.rakuten.co.jp/reports/">楽天アフィリエイト</a>
            </li><li>
                <a href="http://pub.a8.net/a8v2/asResultReportAction.do?action=ud">A8.net</a>
            </li><li>
                <a href="https://www.valuecommerce.ne.jp/">バリューコマース</a>
            </li><li>
                <a href="http://admax.shinobi.jp/">忍者AdMax</a>
            </li>
        </ul>
EOT;

    echo $htmlStr;
}

参考リンク

• ダッシュボードウィジェット API

WordPress4.7から取り込まれたREST API v2を使った、記事へのアクセス方法です

記事の検索

直近の記事10件を取得

• トップページのの末尾に”/wp-json/wp/v2/posts”を付ければ、記事がjson形式で取得できます

2ページ目を取得(11～20件目)

• page=nパラメータを付ければnページ目の値が取得できます

1度に20件取得する(最大100まで指定可能)

• 1ページ当たりの件数も指定可能ですが、指定できるのは1～20の値のみです

記事取得の開始位置オフセットを指定

• この為、?per_page=5&page=4と、?per_page=5&offset=15は同じ意味です
  (16件目から5件分のデータを取得します)

トータルで何ページ分あるか

• X-WP-Total: Postが全部で何件あるか
• X-WP-TotalPages: 何ページあるか(1ページの件数はper_pageで指定)

[WordPress] Rest APIに関する情報サイト一覧

オフィシャルのドキュメント

予備知識

WordPress 4.7リリースでの仕様変更

WordPress 4.7リリース前の記事

古い情報(WP REST API v1を元にしたドキュメント)

WordPressのBootstrapベースのテーマである、Lightningでパンくずリストのカスタマイズを行います。

個別記事ページにを表示させた場合、パンくずリストの末尾に記事タイトルが表示されます。PCで表示したばあいは違和感がないのですが、スマホで表示させたときにタイトルをパンくずリストにタイトルが表示されているとファーストビューに表示される情報量が少なくなってしまいます。またパン屑リストのすぐ下に、h1タグの記事名が出るため、同じ情報が連続表示されてしまい違和感があります。

このため、パンくずリストに記事名を出さないよう修正してみます。

Lightningテーマでパンくずリストから記事タイトルを消す方法

/* Post type
/*-------------------------------*/
if ( ... ) {
   ...
} else if ( is_single() ) {
   ...
   $panListHtml .= '<li><span>' . get_the_title() . '</span></li>';
} else if ...

/* Post type
/*-------------------------------*/
if ( is_archive() || ( is_single() && !is_attachment()) ) {
   ...
} else if ( is_single() ) {
   ...
   // $panListHtml .= '<li><span>' . get_the_title() . '</span></li>';
} else if ...

Lightningテーマで個別ページからカテゴリ名を消す方法

// 個別記事のヘッダで、サイト名の直下にカテゴリ名を出さない
add_filter( 'lightning_pageTitHtml', 'my_lightning_pageTitHtml' );
function my_lightning_pageTitHtml( $titleHtml ) {
    if ( is_single() ) {
        return "";
    }
    return $titleHtml;
}

WordPressでSEO対策や、Facebook/Twitterなどのソーシャルサイト向けのタグを一括設定できるプラグインとしてAll in one SEO packがあります。

このプラグインでは、OGPという記事の要約や画像などをSNSサイトへ正しく伝えるためのメタタグを容易に設定することができます。WordPressでECサイトなどを管理している場合、Twitterカードに商品の画像を表示できるためページへのアクセスアップが期待できます。OGPの仕様では「meta property=”og:image…」というメタタグでページのメイン画像を指定できます。Twitterカードの場合は、「meta name=”twitter:image”…」での管理になります。

ですが、商品の紹介ページなどでカスタムフィールドに商品画像を管理している場合、All in one SEO packプラグインのデフォルト設定ではカスタムフィールドにセットした画像が使用されません。

今回は、カスタムフィールドに設定された画像ファイル名を、All in one SEO packプラグインを使用時にog:imageやtwitter:imageに指定する方法を説明します。

All in one SEO packでog:imageにカスタムフィールドを指定する

WordPressで多くの人が利用しているプラグインのJetpackには、関連記事を表示させる機能が用意されています。この関連記事は、特に設定をしなくても精度の高いお勧め記事を出してくれるのが便利なので利用している方も多いかと思います。

デフォルトでは3カラム表示されるのですが、これを1カラムで表示したい場合は、下記のcssを追加で記載すればよいです。2カラムで出したい場合はwidthを50%にして下さい。

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    width:100%;
}

#jp-relatedposts {
    margin:0;
}

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 4;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

WordPress向けのシンプルな、BootStrap使用テーマにLigithingがあります。今回は、Ligithingで記事ヘッダのレイアウトをカスタマイズする方法を説明します。

今回カスタマイズするヘッダは、下記画像の赤枠の部分です



記事ヘッダのレイアウトは、個別記事/記事一覧ともに、module_loop_post_meta.phpファイルで制御しているので、このファイルを変更します。実際にカスタマイズする場合は、Ligithingテーマを直接編集するのではなく子テーマを作成してから修正してください。

記事の公開日を消す

<span class="published entry-meta_items"><?php echo esc_html( get_the_date() ); ?></span>

最終更新日の表示を消す

<?php    
// Post update
$meta_hidden_update = ( isset($lightning_theme_options['postUpdate_hidden']) && $lightning_theme_options['postUpdate_hidden'] ) ? ' entry-meta_hidden' : ''; ?>
 
<span class="entry-meta_items entry-meta_updated<?php echo $meta_hidden_update;?>">/ <?php _e('Last updated','lightning'); ?> : <span class="updated"><?php the_modified_date('') ?></span></span>

投稿者の表示を消す

// Post author
<?php    
$meta_hidden_author = ( isset($lightning_theme_options['postAuthor_hidden']) && $lightning_theme_options['postAuthor_hidden'] ) ? ' entry-meta_hidden' : ''; ?>
 
<span class="vcard author entry-meta_items entry-meta_items_author<?php echo $meta_hidden_author;?>"><span class="fn"><?php the_author(); ?></span></span>

記事のカテゴリを複数設定している時、すべてのカテゴリを出す

<?php    
    $taxonomies = get_the_taxonomies();
    if ($taxonomies):
        // get $taxonomy name
        $taxonomy = key( $taxonomies );
        $terms  = get_the_terms( get_the_ID(),$taxonomy );
        $term_url	= esc_url(get_term_link( $terms[0]->term_id,$taxonomy));
        $term_name	= esc_html($terms[0]->name);
        echo '<span class="entry-meta_items entry-meta_items_term"><a href="'.$term_url.'" class="btn btn-xs btn-primary">'.$term_name.'</a></span>';
    endif;
?>

<?php    
    $taxonomies = get_the_taxonomies();
    if ($taxonomies):
        // get $taxonomy name
        $taxonomy = key( $taxonomies );
        $terms  = get_the_terms( get_the_ID(),$taxonomy );
        foreach( $terms as $term ) {
            $term_url	= esc_url(get_term_link( $term->term_id,$taxonomy));
            $term_name	= esc_html($term->name);
            echo '<span class="entry-meta_items entry-meta_items_term"><a href="'.$term_url.'" class="btn btn-xs btn-primary">'.$term_name.'</a></span>';
        }
        echo '<br />';
    endif;
?>

shortcodeで記事のタイトルを取得する

function func_showTitle() {
    return "この記事のタイトルは[" . get_the_title() . "]です";
}
 
add_shortcode('showtitle', 'func_showTitle');

shortcodeで記事IDやカスタムフィードの情報を取得する

function func_showItem() {
    $postMeta= get_post_meta( get_the_ID() );
    $name = $postMeta["item_name"];
    return "商品名: {$name}";
}
add_shortcode('showItem', 'func_showItem');