未分類

phpThumbの画像が突然表示されなくなったら

phpThumbはとても便利なライブラリなので、通常のウェブサイトの他、WordPressやMovable Typeと組み合わせて使っている人もいるだろう。
いままで問題無く表示されていたphpThumbを使ったサムネイルの画像が表示されなくなる原因のひとつがサーバーのPHPがバージョンアップ。
phpThumbはバージョンによってPHP5.3の環境ではエラーを返すようになる。
簡単な見分け方は簡単。
表示されない画像にALTが設定してあれば、画像の代わりにALTの文字が表示されているはず。右クリックで画像のみを表示させると、画像の代わりに下記のようなエラーコードが表示される。

Deprecated: Function eregi() is deprecated in /phpThumb_x.x.x/phpthumb.functions.php on line …

PHP 5.3では非推奨のeregi()が使われていることに対する警告

対応方法だが、選択肢は2種類。

1.  警告 メッセージのみ消す

スクリプト先頭の
error_reporting(E_ALL);
ini_set(‘display_errors’, ‘1’);
を変更。

簡単だが、これはおススメしない。
2の方法を施すまでの臨時対応にとどめたい。

2. phpThumb-for-PHP-5.3にする

以下のURLからphpThumb-for-PHP-5.3をダウンロードして置き換える

https://github.com/simpson/phpThumb-for-PHP-5.3

ページ右側にある「Download Zip」ボタンから一式をダウンロード

ページトップに戻るWordPressプラグインおすすめ3種

ページの上へスクロールするためのWordPressプラグインは多数存在するが、お薦めをご紹介。

jQuery Smooth Scroll

有効化するだけで使えて簡単便利。

Scroll To Top

表示文字や色を自由に設定したいなら、このプラグイン。

jcwp scroll to top

表示文字や色はもちろん、表示速度からスクロール速度まで細かく設定できる。

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');
};

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

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

iOS 7.1はより洗練される

iOS 7.1 beta 3のスクリーンショットを見ると、ボタン形状やサイズでも細かくデザインの統一が進められており、さらに洗練されているようだ。

画像:iPhone in Canada
http://www.iphoneincanada.ca/ios/whats-new-in-ios-7-1-beta-3-pics/

favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

Multi Favicon Generator
http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

使い方も簡単。
512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
圧縮ファイルを解凍すると以下のファイルがある。

apple-touch-icon-57×57.png
touch-icon-iphone-retina.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png
favicon_sample.txt
favicon.ico
touch-icon-ipad-retina.png
touch-icon-ipad.png

favicon_sample.txt以外のファイルをサイトのルート(index.htmlやindex.phpがある階層)にアップ。
faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

具体的には、スタイルシートを呼び出している場所

<link rel="stylesheet" href="style.css" />

やtitleタグの場所

<title>○○のホームページ</title>

の前後に

<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

を追加する。

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を「有効化」

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

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