アズールウエディング

制作内容
デザインからWordPress化など
合わせて保守・アナリティクス解析なども継続的に実施させていただいています
URL
http://azure-wedding.jp

大阪のフリープランナー高橋龍一さんのアズールウエディング

ケッコンシキは十人十色!を旗印に、自由自在な最高の結婚式を国内外でプランニングされています。

atelier334

制作内容
デザインからWordPress化など
URL
http://atelier334.com

大分の隠れ家美容室 atelier334

店長さんの撮影した写真を前面に押し出して、シンプルで力強いイメージになりました。
Collectionはヘアカタログとしてではなく、人物の存在感・空気感を見せたいという意向で、ヘアコレクションの写真とは一線を画していて魅力的です。

WordmoveでサブディレクトリにインストールしたWPをFTP経由でpush -d/pull -dができなかった原因と対応

ローカル環境をVCCWで立ち上げるとWordmoveもインストールされていますので、サーバーとローカルのデータの同期がとても楽ですね。

WordmoveはSSHとFTPのどちらも対応していて、今回はFTPで接続する必要がありました。

ルート直下へのWordPress設置ではなく、サブディレクトリ(/wordpress/)への設置をしましたので、Movefileの設定は次のようにしていました。

local:
 vhost: "http://test.local"
 wordpress_path: "/var/www/wordpress/wordpress"

staging:
 vhost: "http://test.com"
 wordpress_path: "/public_html/wordpress" # use an absolute path here

これでwordmove push -dをするとエラーでリモートのデータベースに反映されません。

▬▬ ✓ Pushing Database ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
 remote | write /test.com/wordpress/wp-content/dump.php
 local | download http://test.com/wp-content/dump.php?shared_key=73b11018f2b6797ce265b36d8983489bfc4194ea3e5c114be5b4e39314cef4f03e6646edbbf7a092 > /var/www/wordpress/wordpress/wp-content/remote-backup-1450333959.sql
/usr/local/rbenv/versions/2.1.2/lib/ruby/2.1.0/open-uri.rb:353:in `open_http': 404 Not Found (OpenURI::HTTPError)

ぐぐると、Wordmoveのバージョンを1.2.0にダウングレードして対応するということがあったのですが、VCCWでインストールされているものは1.2.0でしたので、関係はなさそうです。

FTP 経由の wordmove pull で、DB が反映されないバグを解決する方法

エラーをよく見ていると、サブディレクトリが抜けているのがわかります。これですね。ディレクトリがないので404なんですね。

local | download http://test.com/wp-content/dump.php...

仕様なのかバグなのか分からないですが、サブディレクトリはうまくいかないようなので、Movefileのvhostにサブディレクトリを追加してみます。

local:
 vhost: "http://test.local/wordpress"
 wordpress_path: "/var/www/wordpress/wordpress"

staging:
 vhost: "http://test.com/wordpress"
 wordpress_path: "/public_html/wordpress" # use an absolute path here

localの方は変えなくても大丈夫かもしれませんが、一応両方合わせておきます。

これでもう一度wordmove push -dでリモートのデータベースも反映されました。
たぶんwp_optionのhomeとかも変わってしまいますが、wp-config.phpに次の設定をしておけば大丈夫なはずです。

便利ですWordmove。

define( 'WP_HOME', 'http://test.com' );
define( 'WP_SITEURL', 'http://test.com/wordpress' );

WordPress:PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました

以前書いたWordPress:PDFのファイルサイズを取得して表示するショートコードとかPHP:PDFのファイルサイズを取得して表示するのにはまったので解決策をが、このサイトでは(少ないながら)わりと見に来られているようでしたので、以前からちょっとやってみたかったプラグイン申請をしてみました。

WordPress.orgのPlugin Directory:
Get Filesize Shortcode

ショートコードの書式は

ファイルサイズ:ファイルがみつかりません

とすると、ファイルサイズ:7 MBとかファイルサイズ:613 kBのように適切な単位のついたファイルサイズが返ってきます。
PDFに限らず、いろんなファイルのサイズが取得できますので、よかったら使ってください。

たとえばこの画像のファイルサイズはファイルがみつかりません

プラグイン申請はこちらの記事にまるまるお世話になりました。
0からのWordPress公式ディレクトリ登録〜プラグイン編 #wckansai

Hanao Bridal

制作内容
デザインからWordPress構築
URL
http://hanaobridal.com

京都下鴨できもののトータルプロデュースをされている「はなを」様のウェディングサイトです。
アンティークのお着物に加えて、ヴィンテージドレスとオリジナル制作のドレスをラインアップされるのに合わせてサイト制作させていただきました。

馬場ハウス工業のChintai Search

制作内容
デザインからWordPress構築
URL
http://babahouse-rent.com

大阪市立大学周辺、生活便利な御堂筋線あびこ周辺の賃貸物件は、馬場ハウス工業へおまかせください!

地域に密着し、学生向けマンションを多く手がける馬場ハウス工業様の賃貸物件紹介サイトです。
カジュアルな外観とスマートフォン対応で、お部屋の探しやすさにこだわりました。
全室自社管理物件ですので、仲介手数料が不要で、他の賃貸情報サイトから申し込むよりもお得ですよ!

shimosora photos

制作内容
リデザインからWordPress構築
URL
http://shimosoraphotos.com

芦屋にあるマタニティフォト・ベビーフォト専門の小さな写真屋さん。下空写真事務所。

前回もデザインをさせていただいたのですが、今回内容の見直しにあわせてデザインも一新。
お客さまのご要望で、ベビー向けでありながらパステルカラーなどを使用せず、シャープなイメージになっています。

フルート奏者 大塚ゆき オフィシャルサイト

制作内容
デザインからWordPress構築
URL
http://yukiotsuka.com

フルート奏者 大塚ゆき オフィシャルサイト

関西を中心に演奏活動をされているフルート奏者 大塚ゆきさんのオフィシャルサイトです。
ダイアリーページ以外は1ページで構成し、ブロック間をスムーズに移動することができます。
また、海外の方とオンラインレッスンをされることもあり、英語と日本語の二言語で運営できるようになっています。

にこ音楽教室

制作内容
デザインからWordPress構築・ロゴ制作
URL
http://nico-music.com

にこ音楽教室 尼崎にある子供のための音楽教室。

とっても広い、木のぬくもりの感じられる教室でレッスンをされています。
そんな教室の雰囲気を大切にデザインしました。

WordPress:get_template_part()を子テーマで使った時の優先順位

別件でTheme Checkプラグインで出てきたNoticeを調べていたときに、下記の記事に行き当たり読んでいたら初めて聞く話だったので書いておきます。

Understanding get_template_part

日本語ではこちらの記事に優先順位のことが書かれていますが、情報が古いからか仕様が変わったのか分かりませんが、現在の最新版(WP3.7.1)とは順番が違っているようです。

WordPressのテーマ制作で、テンプレートのパーツを読みこませるときに、

get_template_part('content', 'single' );

のように使用すると、まずcontent-single.phpがあればそれを持ってきて、なければcontent.phpを持ってくるというような動作になります。

  1. content-single.php
  2. content.php

の順序ですね。
これが、子テーマを使用している場合にはこうなります。

  1. 子テーマのcontent-single.php
  2. 親テーマのcontent-single.php
  3. 子テーマのcontent.php
  4. 親テーマのcontent.php

get_template_partが裏で何をしてるのか

実際にテーマを探してるのはlocate_template()という関数で、get_template_partはそれに渡すためのファイルの配列を用意しています。
[‘content-single.php’,’content.php’]
という感じですね。この順番が大事です。
locate_templateは最初のcontent-single.phpについてSTYLESHEETPATH、つまり子テーマのディレクトリを先に探して、次にTEMPLATEPATH、親テーマのディレクトリを探します。
どちらもなければcontent.phpをSTYLESHEETPATH、TEMPLATEPATHの順に探します。
ちなみに、header.phpやfooter.phpを読み込むget_header()やget_footer()もこのlocate_template()関数を中で呼んでいるようです。

locate_template(Codex)

WordPress:PDFのファイルサイズを取得して表示するショートコード

以前PHP:PDFのファイルサイズを取得して表示するのにはまったので解決策をというのを書いたのですが、そのコードはテンプレートファイルからPHPコードで呼び出す前提でした。

今回はショートコードを使用して、投稿エディターから呼び出すようにしました。
pdfはwp-contentディレクトリの中にpdfディレクトリを作ってそこに入れている想定です。

[追記]
少し改訂したものをプラグイン化して公式ディレクトリに公開しましたのでよかったら使ってください。
WordPress:PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました
WordPress.orgのPlugin Directory:
Get Filesize Shortcode

引数はファイル名のみですので、

ファイルサイズ:ファイルがみつかりません

のように書けば、
ファイルサイズ:1.2MB
のようにファイルサイズが返されます。

今回PDFにしていますが、他のファイル形式でももちろん問題ありません。

WordPress:投稿内で記事・固定ページ・カテゴリーページのURLをスラッグを指定して出力するショートコード

投稿内でシングルページや固定ページ・カテゴリーページヘのリンクを貼ることがありますが、直接パスを書いてしまうと、公開URLの変更やディレクトリの移動などがあった場合にリンクが切れてしまいます。
ショートコードにしておくとその辺りの作業から開放されるので便利です。

WP MEMO:投稿内で記事・ページへのリンク・URLを出力する
こちらのページでidを指定してURLを取得する方法を紹介されていたので参考にさせていただきました。
ただ、個人的にidを使うのが分かりづらくて苦手なので、スラッグから引っ張ってこれるようにしました。

引数はシンプルに2つだけ用意しています。

//全部引数を使うとこうなります
[permalink type='cat' slug='hoge']

//typeがpageのときは省略できますので最小構成はこうなります
[permalink slug='hoge']

//固定ページで子ページの場合だけ親ページのスラッグも必要になります
[permalink slug='parent/hoge']

//使うときはhref属性の中身です。
<a href="&#91;permalink slug='hoge'&#93;">ほげ</a>

ちょこっと足せばカスタム投稿タイプにも対応できるはずです。

WordPress:qTranslate使用時にエディタの高さが低くなってしまった時の対処

先日WordPressを3.6.1に更新したお客さまのサイトで、投稿欄が狭くなって書きにくいと問い合わせがありました。
3.5か3.6か分からないですが、投稿欄の右下をドラッグしてサイズを変更すると、それを記憶していて次回以降はその高さで表示されるようになっていたみたいですね。

ですが、多言語プラグインのqTranslateを使っていると本文欄が100ピクセルに強制的に変更されてしまいます。
ソースを見るとこんな感じでインラインでスタイルを設定されています。

qTranslateが書き換えたソース

とはいえ、!importantを使用されてるわけではないので、管理画面にCSSを追加すれば対処できました。

functions.phpに

add_action('admin_head', 'content_textarea_height');
function content_textarea_height() {
  echo'
  <style type="text/css">
    /*heightじゃなくてmin-heightにすると右下のドラッグが有効のままです*/
    #qtrans_textarea_content_ifr { min-height:450px !important; }
  </style>
  ';
}

実際には、管理画面用のCSSをすでに用意していましたので、そちらにCSSを書いただけなんですけどね。

qTranslateはTinyMCEまわりをいろいろいじってるみたいなんで、一番WordPressの更新をするのが怖いプラグインです。(個人の感想です)

WordPress:shortcodeをtinyMCEのボタンに割り当てるやつ

自分のサイトに入れてたのにどうやったのか忘れてたので、メモ。

1.ショートコードを作る。

2,プラグインAddQuicktagをインストール。設定。

3.カスタム投稿タイプにも使いたいときには以下のコードをfunctions.phpに

// add custom function to filter hook 'addquicktag_post_types'
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
/**
 * Return array $post_types with custom post types
 * 
 * @param   $post_type Array
 * @return  $post_type Array
 */
function my_addquicktag_post_types( $post_types ) {

    $post_types[] = 'my_custom_post_type';

    return $post_types;
}

WordPress:qTranslate使用時にビジュアルエディタが真っ白になるときの対処法

多言語化プラグインqTranslateを使用するとビジュアルエディタ使用時に本文入力欄が真っ白になる不具合に遭遇しました。
環境はWordPress3.4.2、qTranslate2.5.32。

HTMLエディタに切り替えて更新し、再読み込みしてビジュアルに切り替えると表示されるとか、そのあたりのタブを適当にいじってたら表示されたりとか、たまに表示されるのですが基本使えない状態。
お客さまからクレームがあったわけではないので、環境によるのかもしれません。

解決策はフォーラムにあったのですが、日本語の情報が見当たらなかったのでシェアしておきます。

ページの2/3くらいのところでjamesbonhamさんが書いています。
qtranslate_javascript.phpの217行目の最後のsetIntervalの数値、250を500に変えるというもの。

q_config['js']['qtrans_disable_old_editor'] = "
		var waitForTinyMCE = window.setInterval(function() {
				if(typeof(tinyMCE) !== 'undefined' && typeof(tinyMCE.get2) == 'function' && tinyMCE.get2('content')!=undefined) {
					content=jQuery('#content').val();
					tinyMCE.get2('content').remove();
					jQuery('#content').val(content);
					window.clearInterval(waitForTinyMCE);
				}
			}, 500); // HACK: used to be 250
		";

ただ、私の環境ではこの数値では改善されなくて、結局2000というかなり大きな数値にしないといけませんでした。
環境による差、あるいは言語にもよるのかもしれません。
ともあれ、めでたく表示されるようになりました。

プラグインファイルを直接いじるのはちょっと抵抗もありますが、まぁしょうがない。

開発者の方がqTranslate3.0を作ると言っているので、きっともっと使いやすくなるでしょう!
と思ったら、この記事2010年のじゃないかぁ。

WordPress:Auto Post Thumbnailが動かないとき

今お客さまのブログをアメブロからWordPressに移植しています。
その時にアイキャッチ画像の登録が面倒ですので、プラグインで記事中の写真をアイキャッチ画像に登録することにしました。
使用するのはAuto Post Thumbnailなのですが、インストール・有効化したあとに「Generate Thumbnails」のボタンを押しても何も起こりませんでした。

ちなみにAuto Post Thumbnailのバージョンは3.3.1、WordPressは3.5.1です。

端折って結論です。
プラグインファイルauto-post-thumbnail.phpの119行目

$("#message").html("<p><strong><?php echo js_escape( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

のjs_escapeをesc_jsに書き換えてやるだけです。

$("#message").html("<p><strong><?php echo esc_js( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

こうですね。

これで、各記事にアイキャッチ画像を設定できました!

ウェディングフォト ケープ・ライト

制作内容
リデザインからWordPress化など
URL
http://www.cape-light.jp/

大阪.神戸.京都の結婚式、ナチュラルスタイルのウェディング撮影と手縫いレザーアルバム
ウェディングフォト ケープ・ライト

温かみのある写真と、時間とともに風合いの変化する手縫いのレザーアルバムを制作されているウェディングフォト ケープ・ライトさんのサイトを制作させていただきました。

今回のリニューアルで最もチカラを入れたのは、WordPressの設置によって更新作業を容易にすること。
特に、写真が重要なファクターであるとともに数も多いので、フォトギャラリーの更新については、ほぼアップロードするだけで更新ができるように設計しました。
一つのスライドショーで数十〜百点近い写真を公開されることもあるようですので、一括で写真のアップロードができて、公開ボタンを押したらもうスライドショーができています。

トップページのスライドショーは別のスライドショープログラムを使用しているのですが、更新作業はフォトギャラリーと同じ方法でできるようにしておりますので、プログラムを意識することなく更新していただけるように配慮しました。

WordPress:カテゴリアーカイブにカスタム投稿タイプも追加した一覧ページでページングにハマった

ニュースカテゴリの一覧ページを作成していて、そこにカスタム投稿タイプの記事一覧もあわせて表示させました。
クエリ自体は問題がなくposts_per_page=-1にすれば、すべてが取得できています。

しかし、ページ送りをしようとすると2ページ目以降でページがありません、と404が返ってきてしまうという症状で悩みました。

ページ送りは、よく使っているこちらのコード。

WP-PageNavi を使わずにナビゲーション表示 (改良版)

で、今回はそれをfunctions.phpに置くのを使わせていただきました。
ページナビゲーション機能を改版してみたり

このコードは通常のカテゴリ一覧などでこれまでに何度も使用しているので、問題ないはずなのですが、カスタム投稿タイプが絡んでるのが原因なのかよくわからないのですが、2ページ目以降で404。ただposts_per_pageの値をいじってみるとどうやらページ数はちゃんと合っています。

それで、結論から言えば、パーマリンクの/category/news/page/2/などと表示されるものを/category/news/?page=2と変えたらいけました。

試したけど今回効果がなかったものは、

Top Level Categories Fixプラグイン
Custom Post Type Category Pagination Fix
・表示設定の「1ページに表示する最大投稿数」を1にする

などです。

先の吟遊詩人さんのコードがこれ

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;
 
  $paginate_base = get_pagenum_link(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),
  ));
 
  return $result;
}

そして、最終的にfunctions.phpにかいてあるコードはこれです。

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;

  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('page', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    untrailingslashit('?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),
  ));

  return $result;
}

微妙に変わってます。
9行目と13行目だけか。。あんなにもがいたのに。
まぁ意図どおりに動かせたので良しです!

PHP:PDFのファイルサイズを取得して表示するのにはまったので解決策を

IR情報などPDFファイルのリストを作成することはよくあると思いますが、ファイルのサイズを表示したいという要望は多いのではないかと思います。
PHPにはfilesize()というそのまんまな関数があって、ファイルサイズを取得し、単位を出力するスクリプトを参考に下記の関数を作りました。ってほぼコピペなんですけど。

[追記]
WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました。末尾のコードご参照ください。(2015/01/19)

あと、プラグイン化してショートコードで使えるようにしましたのでよかったら使ってください。
WordPress:PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました
WordPress.orgのPlugin Directory:
Get Filesize Shortcode

function get_file_size($file){
	if ( is_file($file) ){
		$filesize = filesize($file);
		$s = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
		$e = floor(log($filesize)/log(1024));
		if($e==0 || $e==1) { $format = '%d '; }
		else { $format = '%.1f '; }
		$filesize = sprintf($format.$s[$e], ($filesize/pow(1024, floor($e))));
		return $filesize;
	}
}

このとき、get_file_sizeに渡す引数$fileはカスタムフィールドにあるpdfファイルのurlになります。
http://www.ika-ring.net/aaa.pdfみたいなのです。

ですが、このままだと
Warning: filesize() [function.filesize] : stat failed for…….
というエラーが出てしまいます。もうだいぶググったのですが、サクッと理解できるようなものがなかったので書いとくことにしました。
is_file($file)とかで見てもfalseが返ってくるので、さっぱり分かりませんでした。

それで、答えはこのページにありました。
WordPress and the “filesize() [function.filesize]: stat failed” Error

最初二つのコードでなにが変わったのか分からなかったのですが、要はfilesize()やfiletype()などに渡す引数はURLではなくてサーバーのディレクトリーパスを渡せということです。フルパスっていうんでしょうか。
ということで先の$fileからstr_replaceでディレクトリーパスに書き換えることで無事できました。
以下、完成版コードです。
もっといい書き方があったら教えてください。

function get_file_size($file){
	/*教えていただいたように記述を変更しました。
	$mfile = str_replace( 'https://ika-ring.net','/usr/home/somedirectory/www/htdocs',$file );*/
	$mfile = str_replace( esc_url(home_url('/'))."wp/",ABSPATH,$file );
	if ( is_file( $mfile ) ){
		/* WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました */
		$filesize = size_format( filesize( $mfile ) );
		return $filesize;
	}
}

ホームページはあるけれど、ほったらかし

ほったらかしになる理由はなんでしょうか?

何年も前にホームページは作ったのだけれど、今は手を付けていないというケースは多いのではないでしょうか。
その理由はだいたい次のようなところにあるのではないでしょうか。

  • 更新が面倒だ
  • HTMLが分からない
  • ホームページの効果がない

更新するのにホームページ作成ソフトを起動して、ファイルを作ったり、修正したりするのはたしかに手間がかかりますし、他の仕事をしなければならないとなるとそれこそ面倒な作業になってしまうかもしれませんね。
たとえ外部に委託するにしても、打ち合わせをしたり、メールのやり取りをしたり、何かと時間を取られてしまうものだと思います。

また、以前ホームページを担当していた方がいなくなって、分かる人がいないなどというケースもあるかと思います。

ホームページはあるけれども、お客さまが増えるわけでもないのに、わざわざ手間ひまかけて更新する必要はないだろう、という思いもあるかもしれません。

しかし、ホームページは更新しなければ、ますます見に来てくださる方が少なくなり、価値が無くなってしまいます。

そうなる前にワードプレスでまとめて解決しましょう

WordPressで解決しましょう!これらの問題は、ワードプレスで解決できるかもしれません。
ワードプレス(WordPress)とは、ブログシステムから発展したCMS(詳細は省きます)で、ごくごく簡単に言えば、タイトルと本文を管理画面にテキスト入力して「公開」ボタンをクリックしたら、適切にページを作成してくれる、とても簡単なホームページ管理システムです。

そしてこのワードプレスのすごいところは、オープンソース、つまり無料なんです

それだけでなく、いろいろな拡張機能を世界中の技術者が提供していますので、驚くほど拡張性が高いのです。
たとえば、新着情報を公開するのに、管理画面を開くことすら面倒だったら、twitterでつぶやいてしまうなんていうことも簡単にできてしまいます。携帯電話からつぶやいたツイートが、新着情報としてホームページに公開されるのです。