Wordpress

WordPressでアイキャッチ画像の呼び出し方

アイキャッチ画像は通常の画像とは別に扱うことができて便利だが、アイキャッチ画像に対応していないテンプレートや、デフォルトとは別の場所やサイズで掲載したい場合もあるだろう。

WordPressでアイキャッチ用に用意されているコードは大きく2種類に分けられる。
ひとつはwhileループ内で使うもの、もうひとつはループ外で使うもの。

■ループ内
the_post_thumbnail()

使い方
<?php the_post_thumbnail( $size, $attr ); ?>

$size のオプションは
thumbnail、medium、large、full
縦横ピクセル指定、array(150,150)

$attr のオプションは
array(‘class’ => ‘eye_catch’)
とすると画像にクラス名を設定可能

$sizeと併記する場合は
<?php the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘eye_catch’));

■ループ外

get_the_post_thumbnail()は

使い方
<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>

$id
ループ外で使うため、画像を呼び出すためには記事のIDが必要

$size のオプションは
thumbnail、medium、large、full
縦横ピクセル指定、array(150,150)

$attr のオプションは
array(‘class’ => ‘eye_catch’)
とすると画像にクラス名を設定可能

WordPress「投稿」で「アイキャッチ画像を設定」のメニュー項目が表示されない時

WordPressでは投稿記事にアイキャッチと呼ばれる画像を登録する事ができる。
また、サイズも呼び出し時にthumbnail,medium,large,fullやサイズを指定することも出来て便利。
テキストだけの記事よりもグラフィックがあった方がユーザーの興味を捉えることが出来る可能性が高まる。

そんなアイキャッチ画像だが、新規インストールで最新のデフォルトテンプレートを使用してる場合は問題無いが、以前からWordPressを使い続けている場合、メニューに表示されないことがある。

投稿記事ページに「アイキャッチ画像」の項目が表示されていない場合

管理ページ右上の「表示オプション」をクリックして、「アイキャッチ画像」のチェックが外れていたら、チェックを入れる。

「表示オプション」に「アイキャッチ画像」が無い場合

バージョン 3.8.1など、最新バージョンにしているに「投稿」に「アイキャッチ画像を設定」のメニュー項目が表示されない時は、カスタムテンプレートや古いテンプレートを使っていることが考えられる。

そんな場合は使っているthemes内のfunctions.phpに以下のコードを追加

if(function_exists('add_theme_support')){
add_theme_support('post-thumbnails');
};

これで「投稿」で「アイキャッチ画像を設定」のメニュー項目が表示されるようになる。

なお、テンプレートファイルが原因だった場合、この方法で設定は可能になったが、表示すべきテンプレートにコードが無いため、表示はされない。
カスタムテンプレートや古いテンプレートでアイキャッチ画像を表示させるには、表示するテンプレートファイル自体にコードを追加する必要がある。

Single Post Templateでfile_get_contents()のエラーが出る時

WordPressのプラグインSingle Post Templateは、サーバーの環境によりプラグインを有効化した段階でエラーが表示される場合がある。
他のプラグインとのバッティングの場合もあるが、多くの場合、file_get_contentsが原因。

また、パソコンからの管理画面ではエラーが表示されなくても、スマートフォンから管理画面を開くとエラーが表示されている場合もある。

file_get_contentsが理由の場合は以下の方法でWarning(エラー表示)を消すことができる。

/wp-content/plugins/single-post-template
内の
post_templates.php

を開き、

if ( ! preg_match( ‘|Single Post Template:(.*)$|mi’, file_get_contents( $full_path ), $header ) )

の行にあるfile_get_contentsの前にエラー表示抑止のための@を入れる

if ( ! preg_match( ‘|Single Post Template:(.*)$|mi’, @file_get_contents( $full_path ), $header ) )

これでエラー表示は出なくなる。

MTS Simple Booking-C利用で、作成した「設定用の固定ページ」をメニューから除外したい

WordPressで予約システムができるプラグイン、MTS Simple Booking-Cでは、実際にカレンダーを表示させ使用するページ以外に、設定用としてスラッグ名「booking-form」、スラッグ名「booking-thanks」の「固定ページ」を作成する。
WordPressの機能として「固定ページ」を作成すると自動的にメニューに表示されるようになるが、この2つの設定用ページは直接閲覧するためのページでは無いため、メニューに表示されているのは好ましくない。

■利用中のテーマがメニュー編集に対応している場合

  • ダッシュボード→メニュー
  • 新しいメニュー名を設定
  • 表示させたい「固定ページ」にチェックを入れ「メニューに追加」

という手順でメニューに表示させたくない「固定ページ」を消すことが可能。

■利用中のテーマがメニュー編集に対応しない場合(その1)

  • 記事IDを調べる
  • スラッグ名「booking-form」の記事のID(例:15)
  • スラッグ名「booking-thanks」の記事のID(例:16)

表示させたくない記事IDは「15」「16」。

/wp-content/themes/テーマファイルフォルダ/

にある、functions.phpに

function my_mts_menu($args){
$args['exclude'] = '15,16';
return $args;
}
add_filter('wp_page_menu_args','my_mts_menu');

を追加。

これで記事ID「15」と「16」はメニューに表示されなくなる。

■利用中のテーマがメニュー編集に対応しない場合(その2)

テーマファイル内で「固定ページ」のメニューを書き出している部分(header.php等)

<?php wp_list_pages(); ?>

に、除外したい「固定ページ」のIDを引数として追加

<?php wp_list_pages('exclude=15,16' ); ?>

この方法でも同様に、記事ID「15」と「16」はメニューに表示されなくなる。

MTS Simple Booking Cで「予約受付期間外です。」と表示される時

MTS Simple Bookingのサイトにあるスタートガイドに従い、「予約品目登録」、「スケジュール登録」と済ませ
「予約フォーム処理を実行するページの登録」で固定ページとしてスラッグ名「booking-form」、スラッグ名「booking-thanks」のページを作成したのに、ページを開くと「予約受付期間外です。」のみが表示され、カレンダーも予約フォームも表示されない。

その場合は「予約品目登録」「スケジュール登録」等の設定ミスでは無く、表示させる方法が間違っている。

正しくカレンダーを表示(予約システムを表示)させるには、スラッグ名「booking-form」のページを直接呼び出すのでは無く、さらに別のページが必要。

【手順】
固定ページ(投稿ページでも可能)に、(スラッグ名「booking-form」スラッグ名「booking-thanks」のページ)とは別に、表示させるページを作成。
そのページ内に「予約品目登録」の記事のID(xxx)※を含んだショートコード(タグのようなもの)
[monthly_calendar id=”xxx”]
を記載して保存。

↑ このページを呼び出すと、ページ内に、カレンダーが表示される。

※記事のIDは予約品目で「スタート時間」や「予約条件設定」した記事を選び、編集画面でURLの最後にpost=xxx&action=editと表示されている中のxxxがID

MTS Simple Booking Cはサイトに予約システムを追加する、商用可・無償のプラグイン

MTS Simple Booking CはWordPressで構築したサイトに予約システムを追加する無償のプラグイン。
無償版でも、カレンダーによる空き状況の表示、各月毎の受付日の設定や、複数の時間コマ設定(10:00〜、11:00〜、13:00〜)予約受付開始(1日以降はもちろん、3時間後や30分後といった設定も可能)、申し込み受付メールの自動送信(利用者、管理者)、等の自由な設定が用意されているもの。
さらに有償のビジネス版やユーザー管理パックを導入することでオプション機能を増やすことも可能。

このプラグインは
http://mtssb.mt-systems.jp/

http://mtssb.mt-systems.jp/downloadp/(ダウンロードページ)

よりダウンロード
解凍したフォルダ(mts-simple-booking-c)ごと
/wp-content/plugins/
内にコピー
ダッシュボード→プラグイン→インストール済みプラグイン
MTS Simple Booking-Cを「有効化」

ダッシュボードのメニューに「予約品目」「予約システム」が表示されたら

スタートガイド
を見ながら順を追って設定していけばいい。

WordPressの自動更新を止めるには

スクリーンショット 2014-01-30 14.33.41
日本語版ではこの3.8から機能が有効になったもので、3.8以降に更新した後、管理画面のダッシュボードの「更新」を開くと

最新バージョンの WordPress をお使いです。 今後のセキュリティ更新は自動的に適用されます。

と表示される。
セキュリティの面や更新手間を考えると便利な機能だが、いろいろなプラグインでカスタマイズしている場合など、知らないタイミングでバージョンアップによる不具合が生じてしまう可能性も考えられる。

自動更新についての情報は

WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/自動バックグラウンド更新の設定

に以下の記載があり

WordPress には4種類の自動更新機能があります。
コアファイル更新
プラグイン更新
テーマ更新
翻訳ファイル更新

WP_AUTO_UPDATE_CORE
の定数を以下の3つのいずれかの方法で定義することで、コア更新の包括的有効化・無効化を一度に行うことができます。
WP_AUTO_UPDATE_CORE は以下の3つの値いずれかを使って定義できます。それぞれ異なる動作をします。

true – 開発版、マイナー、メジャーアップグレードをすべて有効化
false – 開発版、マイナー、メジャーアップグレードをすべて無効化
minor – マイナーアップグレードのみを有効化し、開発版・メジャーアップグレードを無効化

微調整用のフィルタとして

add_filter( ‘allow_dev_auto_core_updates’, ‘__return_true’ );

等のサンプルも掲載されている。

おススメの方法とし、テーマファイルの変更等に影響されない「wp-config.php」ファイルに設定を追加するのが良いだろう。

wp-config.phpファイル内に以下を追加

define(‘AUTOMATIC_UPDATER_DISABLED’,true);

追加する場所はどこでも構わないと思うが、

/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */

の上に追加

これにより、コアファイルを含むすべての自動更新を完全に無効化出来る。

wp-config.php修正後に管理画面のダッシュボードの「更新」を開くと

スクリーンショット 2014-01-30 14.43.19
最新バージョンの WordPress をお使いです。

となり、「 今後のセキュリティ更新は自動的に適用されます。」の文が表示されなくなっていることで確認出来る。

当然のことながら、これにより自動での更新がされないことから、自分で必要な更新をすることを忘れないように。

WordPressの投稿記事内でjavascriptを使いたい時

通常、WordPressでは記事内に書かれたjavascriptは、たとえテキストモードで入力しても自動的にエスケープされ動かない仕様となっている。

記事内でjavascriptを使いたい場合の解決策としてはカスタムフィールドを使用したりプラグリンを追加する等いくつかの方法があるが、最も簡単なのは inline-javascript というプラグインを導入する方法。
使い方はいたって簡単。
inline-javascript をインストールしてプラグインを有効化。
あとは使いたいjavascriptの前後を
[inline]〜[/inline]
で囲むだけでいい。

例えばページを読み込んだら任意のページに自動的にジャンプさせたい時は
テキストモードにして以下のように記載する。

[inline]
<script LANGUAGE="JavaScript">
function autoLink(){
location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
</script>
[/inline]

実際に上記を入力・保存すると分かるが、scriptのタグは自動的に [ ] に置き換わる。

[inline]
[script LANGUAGE="JavaScript"]
function autoLink(){
location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
[/script]
[/inline]

もちろんこのままできちんと動作するからこのままで良い。

WordPress PDA & iPhoneをコメント対応にカスタマイズする方法

WordPressをスマートフォンに対応させるプラグイン「Wordpress PDA & iPhone」はスマートフォンからの閲覧時にコメントの表示や書き込みができない。
本格的なスマートフォンでの運用を考えた場合、コメントも重要。
一般的な方法としては、テンプレートに

<?php comments_template(); ?>

<?php comments_template('comments.php'); ?>

を追加するのだが、
上記の場合、呼び出されるcomments.phpは同階層のcomments.phpではなく

/wp-includes/theme-compat/comments.php

が呼び出されてしまう。

comments.phpの中身をカスタマイズしないのであればそれでも構わないが、例えばコメントフォームにある「ウェブサイト」を消したい場合やスタイルに手を入れたい場合、このファイルを修正してしまうと、バージョンアップの度に修正しなくてはならなくなる。

同階層のcomments.phpを呼び出す場合は、

<?php comments_template('/comments.php'); ?>

とファイル名の前に「/」を入れる。

なお、
元に入っているcomments.phpの中身は

<?php if ( have_comments() ) : ?>
<?php endif; ?>

だけなので、

/wp-includes/theme-compat/comments.php
のファイルをコピーして修正して、置き換えればいい。

具体的な、コメントを呼び出すための修正は以下の通り

page.php

ファイルの場所は
/wp-content/plugins/wp-pda/jqmobile-theme/page.php

ファイルを開き

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
</div>
<?php endwhile; else: ?>

の箇所に追加して

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>
</div>
<?php endwhile; else: ?>
</div><!-- /content -->

となるようにする。

————————————————————————————

single.php

ファイルの場所は
/wp-content/plugins/wp-pda/jqmobile-theme/single.php

ファイルを開き

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>

の後ろに追加して

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>

となるようにする。