WordPress メルマガ用ランダム記事一覧

WordPress 管理画面の固定ページ一覧にアイキャッチ画像のカラム(列)を追加する方法
https://goo.gl/4rXWTn

Windows 10のペイントを使ってWordPressのアイキャッチ用に写真などの画像をリサイズする方法
https://goo.gl/vnqsbo

[WordPress] 標準のカレンダーに土日祝日を色分けしたい
https://goo.gl/3bXPOu

WordPress のショートコードで囲った文字列を使う方法
https://goo.gl/BEL8Sh

[WordPress] Contact Form 7 (コンタクトフォーム) でカレンダーを使った日付選択をさせる (Contact Form 7 Datepicker)
https://goo.gl/vOxTvw

WordPressのWPtouchプラグインでFeatured Sliderが表示されないときにチェックすべき2つのポイント
https://goo.gl/5ewpU1

WordPress のアイキャッチ画像に適した YouTube 動画のサムネイル画像をブラウザーのURLを指定するだけで取得する方法
https://goo.gl/NMDysR


https://goo.gl/L6z4lF

WordPress 管理画面の固定ページ一覧にアイキャッチ画像のカラム(列)を追加する方法

WordPress固定ページ一覧にアイキャッチ画像を表示

WordPress 管理画面の固定ページ一覧にアイキャッチ画像のカラム(列)を追加する方法についてメモ。

コード

下記のコードを functions.php とかに追記してください。
この例では、ページからアイキャッチ画像を取得し、画像が存在する場合にカラムに「画像」を表示するようにしています。

function add_manage_pages_columns( $column_headers ) {
    $column_headers['eyecatch'] = 'アイキャッチ';
    return $column_headers;
}

function add_manage_pages_custom_column( $column_name, $post_id ) {
    if ( $column_name == 'eyecatch' ) {
        $thumb = get_the_post_thumbnail($post_id, array(50, 50), 'thumbnail');
        echo ($thumb <> '') ? $thumb : '...';
    }
}

add_filter( 'manage_pages_columns', 'add_manage_pages_columns' );
add_action( 'manage_pages_custom_column', 'add_manage_pages_custom_column', 10, 2);

説明

add_manage_pages_columns() 関数は WordPress の固定ページ一覧のカラムを追加するための関数です。
「eyecatch」という名前を付け、「アイキャッチ」という列名表示用の文字列を指定しています。
add_filter() 関数を使って「manage_pages_columns」アクションで実行されるように登録しています。

add_manage_pages_custom_column() 関数は WordPress の固定ページ一覧の各行の対象カラムの表示データを指定するための関数です。
カラムが描画されるごとに呼ばれますので、「$column_name」が「eyecatch(先ほど登録したカラム名)」の時だけ「get_the_post_thumbnail()」関数を呼んでいます。

「get_the_post_thumbnail()」関数は、「$post_id」で指定されたページに設定されたサムネイル(アイキャッチ)画像を「array(50, 50)」で指定された縦横50pxのサイズで取得するためのものです。

この関数の戻り値は、取得した画像かなければ空文字です。
「($thumb <> ”)」で結果を判定し、画像を表示するか「…」を表示するかを三項演算子によって判断しています。

参考:テンプレートタグ/get_the_post_thumbnail

Windows 10のペイントを使ってWordPressのアイキャッチ用に写真などの画像をリサイズする方法

    <div style="padding:36px 12px;">
        <a href="http://www.dreamhive.co.jp/services/wordpress-workshop"  alt="プロが教える WordPress セミナー開催中!"><img src="http://www.dreamhive.co.jp/images/wp_seminar_nowopen.jpg" alt="プロが教える WordPress セミナー開催中!" title="プロが教える WordPress セミナー開催中!" /></a>
    </div>写真などの画像データを持っている方がWordPressのアイキャッチ画像を作るのであれば、<br />

画像編集ソフトをわざわざダウンロードしなくても
標準のツールである「ペイント」でも縮小して保存することができます。

その方法について解説しました。

多くのWordPressのテーマはアイキャッチ画像の最低サイズが縦横200px以上ですので、そのサイズ以上に合わせる必要があることにご注意ください。

[WordPress] 標準のカレンダーに土日祝日を色分けしたい

wpcalendar_holcss

<

p style=”clear:both;”>

このブログをリニューアルした記念に対応してみました。
個別にウィジェットカレンダーを作るプラグインや、休日計算をJavaScriptで行うタイプなど、いくつか種類があるようですね。

今回導入したのは標準カレンダーの土日祝日に、CSS の Class を付加してくれるものになります。
wpcalendar_holcss
これならどんなテーマデザインでも対応できますね。

 
詳しい方法は下記のブログ記事をご覧ください。
[Simple Colors] WordPressのカレンダーに土日祝日のclassが追加されるようにしてみたよ

 
私の導入方法としては functions.php に記載する部分は、「Code Snippets」プラグインを利用します。
CSS 部分も style.css を編集するのではなく、[外観]-[CSS編集]で追加定義する方式で導入しました。

このサイトのカレンダーが導入結果です。
やはりカレンダーには土日祝日が表示されてないとシックリきませんよね!

WordPress のショートコードで囲った文字列を使う方法

プロが教える WordPress セミナー開催中!

背景

WordPress では、あらかじめ登録してある PHP の関数を呼び出せる「[」と「]」を用いたショートコードという機能があります。

こちらの記事でショートコードの作り方は説明したのですが、ショートコードで文字列を囲んで渡す方法について今回は記事にしてみました。

コード

とりあえず、次のコードを functions.php に追加します。

function showcontent_func($atts, $content = null) {
	return "→{$content}←";
}
add_shortcode('showcontent', 'showcontent_func');

続いて投稿や固定ページに次のコードを書き、表示してみましょう。

[showcontent]中身だよ![/showcontent]

こんな感じで見えると思います。

→中身だよ!←

解説

ここでのポイントは、第2引数です。

第1引数にはショートコードへ渡された引数が連想配列で含まれますが、第2引数はショートコードで囲われた文字列が渡されます。

注意点としては、ショートコードへの引数は通常 shortcode_atts() によってチェックしますが、第2引数はそのチェック機能がありません。
そのため、引数のデフォルト値として null を渡すようにしてあります。

参考:
ショートコードAPI – WordPress Codex

応用

ショートコード内に書かれたショートコードは、そのままでは機能しません。
例えば次の様なコードは、内側のショートコード(innnercode)は無視され、外側のショートコード(showcontent)しか動かないと言うことです。

[showcontent][innnercode]中身だよ![/innnercode][/showcontent]

この様にネストされたコードを実行するようにするためには、次の様にショートコードの定義で do_shortcode() 関数を呼び出すようにします。

function showcontent_func($atts, $content = null) {
	return '→' . do_shortcode($content) . '←';
}
add_shortcode('showcontent', 'showcontent_func');

参考:
do_shortcode()

まとめ

囲み型ショートコードを使う事で、応用の範囲が大きく広がることがわかりますね。

[WordPress] Contact Form 7 (コンタクトフォーム) でカレンダーを使った日付選択をさせる (Contact Form 7 Datepicker)

jQuery の Datepicker というカレンダー選択を WordPress の Contact Form 7 と連動させるプラグインの紹介です。
(Contact Form 7 のアドオン的なプラグインなので Contact Form 7 を導入してご利用ください)

まずプラグインをインストールして有効化します。(Contact Form 7 Datepicker で検索)
そうすると、Contact Form 7 で作成したフォームの編集画面を開くと下記のように「Datepicker Theme」が追加されます。
cf7dp01
↓ 展開後 ↓
 
ここでカレンダーのデザインを選択します。
cf7dp02

次にフィールドを作成する部分に Datepicker のフィールドが追加されています。
cf7dp03

下の例は一番複雑な「Date Time field」を選択したイメージです。
cf7dp04
細かい設定が可能なので、日付を未来しか選べないようにしたり、時間を30分単位にしたり、目的に応じてカスタマイズが可能です。
ちなみにdate-formatで日本語「yy年・・・」とかは使えませんでした。。。残念



弊社代表(ドリームハイブ代表 山本 悟)がお送りしている無料のメルマガです。
興味がございましたら、是非ご登録ください!!


WordPressのWPtouchプラグインでFeatured Sliderが表示されないときにチェックすべき2つのポイント

この記事を書いた背景

WordPressのWPtouchプラグインを使うと簡単にスマートフォンやタブレットに対応したサイトに変更することができます。

しかし、今回企業向けのサイトを作っている際、アイキャッチ画像を指定した投稿がFeatured Sliderに表示されないという問題が出ました。

◎Featured Sliderの表示例
WordPress Featured Slider機能

このとき、きちんと動作させるためにチェックすべき2つのポイントについてのメモです。

原因

この問題の原因は、次のどちらかです。

  • WPtouchプラグインの設定がミスっている
  • WordPress本体の設定がミスっている

解決方法

次の通り、それぞれの設定を変更しましょう。

WPtouchプラグインの設定

  1. 「WPtouch|Theme Settings」メニューを開きます
  2. 「Enable featured slider」にチェックを入れます
    WPtouch Theme SettingsのFeatured Slider

WordPress本体の設定

  1. 「設定|表示設定」メニューを開きます
  2. 「投稿ページ」に何かしらの固定ページを指定します。
    WordPress 表示設定の投稿ページ

WordPressの関数の動作について

WordPressは、仕様で次のように関数が動作します。
※「設定|表示設定」メニュー部分の設定について

is_front_page()とis_home()の両方がtrueになるパターン

「フロントページの表示」が「最新の投稿」に設定されている

is_front_page()がtrueになるパターン

「フロントページの表示」が「固定ページ」になっており、
「フロントページ」に何かしらの固定ページが指定されている

is_home()がtrueになるパターン

「フロントページの表示」が「固定ページ」になっており、
「投稿ページ」に何かしらの固定ページが指定されている

テーマの都合などで上記の設定を行えない場合

例えば、「/wp-content/plugins/wptouch/themes/bauhaus/default/header-bottom.php:l56」に次のコードを書き加えるなどすれば動きます。

プラグインのアップデートで消えるのでおすすめはしませんが。

<?php if ( is_front_page() ) { ?>
    <?php if ( function_exists( 'foundation_featured_slider' ) ) { ?>
        <?php foundation_featured_slider(); ?>
    <?php } ?>
<?php } ?>

まとめ

企業向けのWebサイトでは、ホームページに当たるページに投稿の一覧のみが表示されることはほぼないでしょう。

その場合、「フロントページ」には何かしらの固定ページを指定するケースが多いと思います。

しかし、WPtouchプラグインではis_home()によってFeatured Sliderの表示の有無を切り替えるので、「投稿ページ」を指定しないと表示されないことになります。

結局ソースコード読むことになっちゃいました。。

WordPress のアイキャッチ画像に適した YouTube 動画のサムネイル画像をブラウザーのURLを指定するだけで取得する方法

この記事を書いた背景

WordPress には、投稿や固定ページに閲覧したユーザーの
目を惹くようにするためのアイキャッチ画像という機能があります。

自分の場合は記事を書くときに YouTube 動画を載せることがあるのですが、
その際に YouTube 動画のサムネイル画像を
アイキャッチ画像として指定したくなることがあります。

サムネイル画像は、YouTube のクリエイターツールで表示されるものを
保存する方法などが基本かと思いますが、
もっと簡単に取得する方法として
今回はブラウザーの URL を指定するというやり方をご紹介します。

なお、今回の方法は動画の任意の場所を切り出すものでありません。

画像を取得する方法

ブラウザーで動画を取得する方法は、次の URL を指定するだけです。

http://i.ytimg.com/vi/<動画のID>/<画像サイズ>.jpg

i.ytimg.com は YouTube 動画の一部を
画像として書き出す専用のサーバーのようですね。

YouTube のサイトの HTML ソースを見ると
このサーバーがよく出てくるのがわかると思います。

動画のID

「動画ID」は YouTube の動画に割り当てられる固有の番号で
「v=」のあとの部分のことです。

YouTube 動画の URL が
「https://www.youtube.com/watch?v=fPgRIfZrvWs」の場合、
「fPgRIfZrvWs」の部分のことです。

画像サイズ

現在の YouTube の仕様では
サムネイル画像は動画中から3つ切り出されて作られるらしく、
用途によって複数のサイズが用意されています。

以下、種類ごとに「画像サイズ」に指定する値を一覧にしました。

W120 x H90

  • default.jpg(YouTube でサムネイルに設定した画像)
  • 1.jpg(自動生成されたサムネイルの1つ)
  • 2.jpg(自動生成されたサムネイルの1つ)
  • 3.jpg(自動生成されたサムネイルの1つ)

例:http://i.ytimg.com/vi/fPgRIfZrvWs/default.jpg

W320 x H180

  • mqdefault.jpg

例:http://i.ytimg.com/vi/fPgRIfZrvWs/mqdefault.jpg

W480 x H360

  • hqdefault.jpg

例:http://i.ytimg.com/vi/fPgRIfZrvWs/hqdefault.jpg

まとめ

今回紹介した方法は YouTube が公式に提供しているものではないため、
そのうち使えなくなる可能性があります。

とはいえ似たような方法は今後も出てくるので
変わったらその方法に合わせればよいですね。

まぁしかし便利です(笑)

参考

YouTube Data API の概要

あなたの IT の疑問・不安をすべて解決するコンシェルジュ サービス