タグ別アーカイブ: WordPress

WelcartでAdvanced Custom Fieldsを使うブックマークレットを作った

中小企業にとって、コストを抑えつつサイトを効率よく運営したいという要望を満たすCMSとして、良くも悪くもWordPressが最近では主流になってきていると実感しています。反面、それ本当にWordPressでやる必要ある?というものも数多く感じるようにもなってきました。でもやっぱりカスタマイズ前提な場合、すぐに実行に移せるWordPressのノウハウを捨てきることが出来ず、ずるずるWordPress頼みになってしまう現状です。

話がそれたような気がしますが、ECサイトの場合、ブログなどと分離するのが面倒だとか一元管理したい、カスタマイズしたいという場合にWordPressプラグインのWelcartを採用することがあり、そこでAdvanced Custom Fieldsが使えないため非常に面倒でした。
何度か要望は出してみたり、カスタマイズしてみたものの、数年間放置されたり頻繁にアップデートされたりいろいろ面倒だったので現在ではブックマークレットを使って処理しています。

ブックマークレットコード

javascript:(function (){var url = location.href,result = url.match(/&post=(.*)&/),protocol = location.protocol+'//',host = location.host+'/';location.href = protocol + host + 'wp-admin/post.php?post=' + result[1] + '&action=edit'})()

使い方

上記コードをコピーして、ブックマークレットとして登録してください。
(どこかのページをブックマークに登録し、ブックマークを編集画面からURLを書き換えると楽です。)

最初に商品登録画面から登録を済ませ、下書きで保存した後に、上記ブックマークレット発動させます。
商品登録画面ではない、通常のWordPress編集画面に移動し、Advanced Custom Fieldsで作成したカスタムフィールドが表示されます。
入力を済ませたら下書きで保存し、(公開でもうまくいくとは思いますが推奨しません)商品編集画面から公開をします。
自己責任でお願いします。何があっても責任は取れません。

なぜ動くのか

WordPressには投稿IDというIDが振られており、Welcartで作成した商品にもIDが振られています。そのIDにカスタムフィールドを結び付けてやるために、強制的に画面を呼び出し登録することで、Advanced Custom Fieldsのカスタムフィールドを扱うことが出来ます。

おわりに

Advanced Custom Fieldsのギャラリーだったり、繰り返しの中に繰り返しを作れたり、繰返しの中にギャラリーが作れたりするのが最高に便利。また、コンテンツ柔軟フィールドがConcrete5のブロックみたいな感じで非常にページを作るのに便利なのでECサイトのデフォルト機能として搭載してくれると嬉しい。

日本の場合やっぱり楽天メソッドのような縦型ページじゃないと売りにくいし、WordPressの場合、無闇矢鱈に画像を貼り付けるかカスタムフィールドを使わないとHTMLで組んでるのとおんなじになってしまうので、このような機能を使って意味のあるページを作成していき、気持ちよく買い物してほしいと最近は思ったりしてます。(なんでもいいのでWelcartには早く対応してほしい)

VCCWにphpMyAdminとwordmoveを載っけたVCCW-pwを作った

sshpassを入れ忘れていたので追加しました。
sudo yum install -y sshpass でsshpassがインストールできます。


さよならVVV

最近までVVVというWordPressをローカルで構築するものをカスタマイズして使っていたんですが、VVVのカスタマイズがあまりにも面倒くさくて、かつバグりやすいのでChefの勉強がてらVCCWに出戻りしました 。

VCCW is god

そしたらVCCWはまごうことなき神でした。僕の記憶に無いだけかもしれませんが、前まではWindowsで動かなかったり、Vagrantfile内でここまでできなかった気がしたので。これからWordPressを開発するのであれば離れられない気がします。プラグイン最初にインストールする設定が便利。

んで、VCCWをフォークし、個人的に欲しかったものをプラスしたVCCW-pwを作りました。

VCCW-pw

https://github.com/tanshio/vccw

おもむろにgit cloneしてディレクトリを移動しvagrant upすれば動きます。

VCCWにphpMyAdminを追加し、rubyのバージョンを上げ、wordmoveを入れただけです。
phpMyAdminはなんだかんだで便利。
wordmoveはページ追加などの更新作業の時にローカルに環境ごと取り込めるので便利。wordmoveのFTPだとバグりやすいのでlftpはインストールしてません。SSHを推奨。

以下のcookbookを使わせていただきました。

https://github.com/fnichol/chef-rbenv
https://github.com/fnichol/chef-ruby_build

あと、おまけでbrowsersyncを入れてあるのですが、プロキシのせいなのかロードに5秒ぐらいかかる。こういうものなのかな。

Chef便利

Chefは2年ぐらい前に触れてからアレルギー的な感じで拒否反応を起こしてましたが、触れざるを得ない事情で触れて勉強してみたらそんなに難しく感じませんでした。
自宅サーバーを構築したことある人だったらすぐ慣れそうな気がします。templateが便利すぎて唖然。多分Vagrantのおかげで簡単に思えたようにも思える。

まとめ

ぶっちゃけWordPressはいろいろあれな感じに思えてはいるのですけど、Web制作を生業とするとこれからも長い間離れようがない気がしてるので、できるだけサクサク環境を構築できるものを使って、さっさと終わらせたいもんです。
gitでデータベースも管理できたらそれだけでも楽なんですが\(^o^)/
(versionpressとrevisrに期待を込めて)

WordPressの機能を使いつつLPを作る上でハマったこと

最近ランディングページ専門業者みたいになってるわたくしなのですが、先日WordPressの機能(Contactform7)を使いながらレスポンシブLPを作ったら壮大にハマったのでメモしておきます。

通常はHTMLファイルに偽装したPHPファイルに上記のコードを読み込むことでWPの機能が使えるようになります。

プラグインとの競合

通常、LPとWordPressで組まれたサイトの場合、CSS・JSは違うものを使うと思います。

上のコードを入れればWPのスタイル、JSを除去できるのですが、ハマりました。

既存サイトがPCサイト向けのデザインの場合、スマホのために無理やりレスポンシブにするのではなく、Multi Device Switcherというプラグインを用いて別テーマで出力しています。こいつでハマりました。
なぜかPCでもスマホでもフッターにスタイルとJSが埋め込みされてしまいました。

Multi Device Switcherの除外設定

参考:特定のURL、固定ページのみ「theme」を切り替える

上記設定で、フッターにスタイルおよびJSが埋め込みされなくなります。多分上記解決コードがなかったら諦めてCGIフォーム使ってたと思います。

テーマ切り替えスイッチを使用している場合は表示されてしまうので、display:noneで非表示にしときましょう。

表示されていてもステータスコードは404という謎

普通LP作ったら広告出稿すると思うんですが、ブラウザでは表示されているのにステータスコードが404でした。そのため広告が不承認になってしまいてんやわんやでした。

URLはドメイン/lpのような感じでした。

解決策

index.htmlをつけたら大丈夫だった。

URLがドメイン/lpのような感じだったので、おそらくWordPress側でデータが無いため404を返していたのだと思います。index.htmlはURL上すっきりしないのであまり好みじゃないのですが、そんなことも行ってられないのでこれで対応しました。
これによりちゃんと広告が承認されました。

まとめ

WPの機能におんぶにだっこでもいいのですが、それにより伴う時間のロスもそれなりに発生します。主にプラグインですが。。。
このエントリが誰かのためになることを祈ります。(多分未来の自分)

WordPress3.9でTypePad 絵文字 for TinyMCEが動かない場合の解決策

2014/4/29コードを修正しました(コードが逆でした\(^o^)/6nuno9さんありがとうございます)

WordPressを用いてクライアント側でブログなどを更新してもらう場合、賑やか感を出すためにTypePad 絵文字 for TinyMCEというプラグインを導入しています。

WPが3.9にアップデートされたと同時に、WordPressのビジュアルエディタであるTinyMCEのバージョンもアップデートされ、TypePad 絵文字 for TinyMCEが動かなくなってしまいました。
症状としては、絵文字のポップアップが出るもののクリックしても絵文字が挿入されないというものです。

原因としては、window.tinyMCE.execInstanceCommandというメソッドが動かなくなったためです。
代替としてwindow.tinyMCE.execCommandが用意されていますので、それを用いることで今まで通り絵文字が挿入可能となります。

解決策

InsertEmoji.jsのコードを修正

/wp-content/plugin/typepad-emoji-for-tinymce/InsertEmoji.js

のコードを少し修正します。

をコメントアウト、もしくは削除し、

を追加します。

参考コード

参考:WordPress3.9でTypePad 絵文字 for TinyMCE 記事に挿入できないとき

キャッシュのクリア、もしくはリロードする

ブラウザにキャッシュが残っていると動作しないので、コードを変更した後ブラウザのキャッシュをクリアするか、
ドメイン名/wp-content/plugins/typepad-emoji-for-tinymce//InsertEmoji.js
上記URLにアクセスしリロードすることで投稿画面から今までどおり絵文字が挿入されます。

VagrantでWordPressを速攻デプロイできるVVV-mediumを作りました

2014年9月1日wordmoveを用いるときに使うrubyがおかしかったのを修正
2014年8月31日動かなかったのを修正

VVVをフォークしたVVV-smallに、wordmoveを加え、若干手間はかかりますがスマホにも対応したVVV-mediumを作成しました。

VVV-medium

VVV-smallとのファイルの違いは、provision.shとVagrantfileのみです。

インストール方法

インストール方法は、

でクローンし、vagrant upしてください。
ruby1.9.3、Rubygemのアップデート、wordmoveのインストール、sshpass、lftpのインストール、Movefileの作成、その他設定などを実行します。

スマホ対応

ローカルネットワークからのアクセスを許可し、Wi-Fi環境であればVagrantで構築したWordPressにスマホを直接アクセスさせることができます。

Windowsであればコマンドプロンプトでipconfig、Macであればifconfigでローカルネットワークを調べ、使えるIPアドレスをセットしてあげることでスマホからアクセスさせることができます。

Vagrantfile 82行目から

上記private_networkを指定している行をコメントアウトし、public _networkのところのコメントを外し、IPを使えるIPアドレスに変え、vagrant upします。(もしくはprovisionやreload)

その後、

でwordpressのインストール場所に移動し、

でVagrantのWordPressをIPアドレスで見られるようにします。

以上で上記のようにIPアドレスでアクセスさせることができます。
GruntなどのWebsocketを用いているLivereloadツールであれば、設定すればPC・スマホ共にライブリロードがかかります。

なんでもかんでもLivereload

IPアドレスでの運用はおすすめされていないかもしれませんが便利です。

注意
WindowsでGruntやGulpなどのnode.js軍団を用いる場合は注意が必要です。 Windowsではパス名の長さに制限があるため、できるだけ浅い階層でnpm installしたほうがよいでしょう。nodemodule/~/nodemoduleみたいなかんじで下層にディレクトリが作成されまくることがあり、その場合node.jsは動作しません。Macでは動きます。

wordmoveについて

wordmoveについてはこちらを参照ください。

おわりに

やはりvagrant upやreloadした時にmysqlが落ちてるのでvagrant sshをしてsudo service mysql startしてあげてください。
作ってる最中にVagrant Shareとか出来てしまいましたが、ローカルで済ませたい場合はオススメです。
なにかありましたらご連絡ください。

wordmoveでローカルのWordPressを速攻デプロイ

wordmoveとは

wordmove

wordmoveは、WordPressをDBごと管理できるrubyのライブラリです。
ローカルからホストに、ホストからローカルに、SSH(FTP)を用いてDB、テーマ、プラグインなど利用法に合わせてアップロード・ダウンロードすることが出来ます。
Vagrant(VCCW、VVV)と一緒に使ったりすると便利です。

インストール方法

VCCWであれば2014年9月18日に取り込まれました。

ruby1.9.3~、rubygemsは最新であれば動きます。

使い方

  • wordmove help wordmoveのヘルプ
  • wordmove help [TASK] wordmove help pull 等でpullの詳細オプションを表示
  • wordmove init wordmoveの設定に必要なyaml形式のMovefileを作成します。WordPressの基本ディレクトリで実行。
  • wordmove pull ホストからローカルにファイルをダウンロードします。
  • wordmove push ローカルからホストにファイルをアップロードします。

pullとpushの引数

最初にwordmove pullで全て取り込んでテーマを開発・機能の追加、その後に、wordmove push -tなどでテーマだけアップするということも可能です。

引数は同時指定が可能ですので、wordmove pull -dtuと言った感じでデータベース、テーマ、アップロード画像を取り込むことも出来ます。

また、データベース(-d、–db)のコマンドを打つとローカル、ホスト共にバックアップが作成されますので、gitで管理が難しいDBなどで何かエラーが起こってしまった場合でも復元が可能です。

デフォルト設定ファイル

wordmove initで出力される初期設定ファイルです。
ローカル部分はvhost以外WordPressの設定を読み取ってくれます。

SSHかFTPを選択することができます。
用途に合わせてSSH・FTPをコメントアウトし、インデントを整理して下さい。yaml形式なためインデントがおかしいとエラーが出ます。(スペースとタブを一緒に使ってもおかしくなるので注意して下さい。)


ハマったこと

SSHであればsshpass、FTPであればlftpをインストールする必要があります。

空白画面になる

サーバーがapacheの場合、.htaccessが無いためだと思いますので、wp-adminにログインして、パーマリンクの設定ボタンを押して下さい。.htaccessが作成されますのでそれにより解決されるはずです。

文字コードが違くてはねられる

charset: ‘utf-8’

をmovefileのデータベースの欄に追加すれば動くかもしれません。

SSHできれる

ローカルからホストにSSHで一旦ログインすれば解決するかもしれません。

yamlうんたらかんたら言われる

VVVの環境ではbase.rbにrequire ‘yaml’が無いためエラーが出ていました。色々インストールすればrequire ‘yaml’を付け加えなくてもいいのですが、base.rbに付け加えることでyaml形式のファイルを読み込むことが出来ました。(既にwordmoveに取り込み済み)

mysqldumpのパスを合わせる必要がある

ここはcoreserverを用いて運営しているのですが、coreserverのmysqldumpのパスが特殊なためrsyncがエラーを起こしているのかmysqldumpがないよというエラーが表示されdumpできませんでした。

さくらのレンタルサーバー、VPS、Xserverなどでは動いたため、mysqldumpのパスを合わせる必要がありそうです。これについては小学生並みの貧弱英語スキルで開発者さんに提案済みです。

サーバーでwhichして上記のとおりであればSSHでは動きます。

FTPだと挙動が不安定

ロリポップのようにSSHが使えないサーバーの場合、FTPを使う必要があります。
FTPだと、~/.lftprcに、

(上の1行だけでもOKかも)
上記の設定をしてあげないといけません。セキュリティ上あれなので、ロリポップなどでやる場合は自己責任でお願いします。

また、FTPの場合ですと途中で止まる確率が高いので注意してください。止まっても放置すれば再開されます。

シリアライズがうまく行われない場合が多いのでSSHが使えるサーバー以外はおすすめしません。

SSHとFTPでパスの書き方が違う

ローカル部分はそのままでいいのですが、SSHの場合とFTPの場合とでパスが異なります。

SSHは絶対パス(WordPressまでの全部)となりますが、FTPではログインした場所からのパス(言葉では言い表しづらい)となります。

Filezillaなどでホストにログインした際に、/var/www/が表示されていたら、

と修正します。

はてなマークになる

Windows版波ダッシュなどがデータベース(投稿など)にあると、push時にはてなマークに変換される場合があります。プラグインがあるのでそれで対処するか、波ダッシュを〜(Mac版波ダッシュ)にして下さい。メイリオで表示すればWindowsでもMac版波ダッシュは綺麗に表示されます。


よくわからないところ

引数の順番の関係なのかどうかわかりませんが、プラグインのデータがたまにおかしくなる場合があります。wp-pagenavi(ほぼ100%)、WordPress SEO by Yoast(たまに)で確認しています。

Advanced Custom Fieldsなどは大丈夫なので、他にテーブルを作る奴が怪しいかもしれません。更新時など、pushをする場合は慎重に行って下さい。


おわりに

テーマや自分で使うプラグインの開発にwordmoveはもってこいです。
ただ、データベースをローカルからホストにpushする際は注意が必要です。
バックアップをしっかり取り、問題になりそうなキャッシュプラグインなどを一応一旦解除し、wp-cliがインストールされている環境であれば

wp search-replace ローカルドメイン ホストドメイン

でシリアライズされた文字ごと書き換えたあと移動してください。

SSHの場合的確にシリアライズされます。FTPだとバグる可能性が大なのでSSHをおすすめします。

また、pushする場合マージされず上書きなので、バックアップは作成されますが、pushは慎重に行うことをおすすめします。

ローカル→ホストのテーマ変更が wordmove push -tで済むのは非常に便利なのでぜひお試しください。

VagrantでWordPressを効率よく開発するためのVVV-smallを作りました

2014年9月1日、動かなかったのを修正しました。

VagrantでWordPressを開発するときに使うものといえば、VVVかVCCW。
VCCWは思想的に好みなのですが、Windowsで動かず複数人環境では導入できませんでした。
VVVはIPアドレスで仮想環境にアクセスすると、vvv.devが優先となり、他に3つのWordPressが入っています。正直3つもいらないので削り、WordPressを1つにし、vvv.devをサブにしたVVV-smallを作成しました。日本語のWordPress最新版をダウンロードする設定にしてあります。

VVV-small

注意事項

vagrant haltの後vagrant upするとmysqlが落ちたままです。(reloadでも同じ)
vagrant provisionをするか、SSHでsudo service mysql stop→sudo service mysql startで再起動させるなどしてください。(元々のVVVもそんな感じです。)

VVVがgoogle Public DNSを用いているため、ルーターなどの設定で許可されていない場合はコケます。

基本URLは、http://local.wordpress.dev
フォルダはwww/wordpress-defaultです。テーマなどの変更はリロードすれば反映されます。

ドキュメントについては時間がある時に書きます。

今後の予定

  • Vagrantfileで色々できるようにする
  • apache版を作る
  • 私が使うWordPress基本プラグインを最初からインストールさせておく
  • 作成中のテーマと連携させる。(Gruntなど使用)

2014年ぼくのWordPressさいきょう高速開発ツール

2014年はじめから、不運続きで今日に至っては雪のせいでバスは直行だわジャンプも買えないだわで悲しい1日でした。全部雪のせいだ。言ってみたかっただけです。

常々考えているのが、どうやったらこの不運をはねのけられるほどの力、ようするにさいきょうになれるかなのですが、ぼくの中で結構固まってきたのでアウトプットします。(小野さんのパクリです

流れ

簡単な流れとしては、
デザイン→フロントエンド→バックエンド(デプロイ)
デザインは高速開発から除外で。

フロントエンド編

BEM

HTML、CSSおよびPSDはもうコレがないと運用ができない体質になってしまいました。冗長だけど管理が楽。

headerにあるヘッダーナビの場合、名前付けは私の場合こんな感じ
header→header__nav→header__nav--list
あってるのかはわかりません。。。

Sass

Stylusを使っていたんだけど、人に渡すときにはやはりSassの方がいいかなーと思って最近はSassでCSS書いてます。ちなみにCompassはスプライトの時しか使ってません。なんにしろCompassは重い。
レスポンシブの場合にIE用に分岐してたりもできて便利。
ファイルを分けて運用。

Grunt

gulpでもいいっちゃあいいんだけど、初心者の人に説明しづらいので。
メインで使ってるのは、

  • grunt-contrib-connect
  • grunt-este-watch
  • grunt-sass
  • grunt-contrib-cssmin
  • grunt-styleguide
  • (grunt-contrib-compass)

compassはライブリロード時に引っかかるので、Libsass使ったら即時反映されるようになり、もはやスプライト要因となりました。este-watchはたまにライブリロードがかからない場合があるけど、その時はだいたいローカルサーバーのタブ開き過ぎって感じがする。
Gruntでいろいろ詰め込んで最強(さいきょうではない)だぜうわはははとかやってたんだけど、なんか熱が冷めたので残ったのはだいたい上のメンバーたちになりました。

styleDocco

Gruntと併用でスタイルガイドを自動化できるスグレモノ。
SassやらMixinやらでいろいろできる。ファイル別にスタイルガイドを作成できるので便利。レスポンシブにももちろん対応。
しかしライブリロード環境だとバグるので手動更新。ビルドしたとき、更新したとき、譲渡するときにだけ確認するものなのでライブリロードは別に必要ないんですけども。

他にもNormalize.cssとか当たり前になりつつあるものは取り入れて開発してます。

バックエンド編

Vagrant

仮想環境を立ち上げてくれるツール。だいたいはvvvやらVCCWなどのWordPressに最適化されたvagrantfileをカスタマイズして開発を行っています。ローカルネットワークの場合スマホからアクセスさせることもできるので便利。

Git

Gitがないともはや運用は不可能。GitのMasterブランチにコミットされたら自動で反映されるバッチを書いたんだけど、他にいいやつがあったので使わなかった。テンプレートファイル履歴みたいな感じ。

wordmove

WordPressをホストからローカルにデータベースごと持ってきたり、その逆をしたりするもの。ローカルで何かしらWordPressに追加したものをホストでインポートするより、wordmoveを用いたほうが運用が楽。

まとめ

なんか当たり前みたいな感じになってしまいましたけどぼくの中ではさいきょうなんです><
一人でやるぶんには困るのは自分なんでどうでもいいんですけど、ソース渡したり、複数人で更新するという場合には出来る限りみんなにわかりやすく構成するということが、後々自分のためにもなるという認識です。それこそがいわゆるさいきょうですね(粉みかん)

Ghostの管理画面を再現したWordPressプラグイン「Gust」が凄い

Ghostといえば、最近流行りのnode.jsで動くブログプラットフォーム。
WordPressは最近になってwordpress.comでMarkdownを導入、インストール版ではjetpackプラグインなどでMarkdownを簡易的にサポートしだしました。
一方、GhostはMarkdownでの投稿がメインであり、投稿画面はシンプル。どうにかしてこの投稿画面にWordPressもなんねーかなーと思っていたら、ついに登場してしまいました。

WordPressプラグインGust

最近私が導入していたMarkdownプラグインに、SplitDownというGhostモチーフのものがあったんですが、Gustは管理画面・投稿画面すらGhostを完コピしてしまうという有り様。Ghostを使ったことをある人でもない人でもこの投稿画面に一回触れたらもう戻れなくなるんじゃないかな!

インストール方法

既に公式プラグインとしてアップされているので、管理画面、もしくはプラグイン公式サイトGustと検索し、管理画面からインストールするか、プラグインディレクトリにアップしインストールします。インストールしてからプラグインを有効化し、パーマリンク設定を保存します。
Gustは管理画面を書き換えるプラグインのため、パーマリンクの設定を忘れないで下さい。(wordpressの管理画面はいつもどおり使えます)

その後、
http://ドメイン名/gust
というURLにアクセスするとgust用の管理画面が登場します。

ログイン画面

記事一覧画面

既にログインしている場合はこの画面に飛びます。

左の記事をクリックするとプレビューし、編集やらパーマリンクの設定、投稿日の設定、削除などが行えます。

メディアクエリが仕込んであるので、スマホ、タブレットなどにも対応しています。スマホ、タブレットの場合はプレビューが表示されません。

投稿画面

投稿画面はこんな感じ。

一番上がタイトルで、左が本文、右がプレビュー。
本文のはてなマークはMarkdownのヘルプ。
フッターメニューにはカテゴリ、タグ、設定(URL・時間・削除)投稿ボタンが配置。
投稿ボタンの下矢印をクリックするとPublish Postというメニューがあるので、それをクリックすることで投稿できます。

ヘルプ

Markdown記法を体得していない人のためにヘルプが用意されています。ショートカットキーが割り当てられているのでかなり便利。

画像のアップロード方法

Markdown記法による呼び出しか、Ctrl+Shift+I(これが便利)でプレビュー画面に画像埋め込みボックス的なものが登場します。
ここをダブルクリックか、画像をドラッグすることで画像をアップロードすることができます。
なお、WordPressのメディアライブラリから埋め込むことはできませんので注意。(画像のURL埋め込みであれば可)

投稿画面もレスポンシブ

投稿画面もレスポンシブ。プレビューがタブ表示になります。

まとめ

おそらく現時点で使えるMarkdownプラグインで最強。(1日しか触ってないけど)まさかGhostからそのまんま持ってくるとは思わなかった。
画像があると文字打つたびに点滅しやがる場合がある、文字がたまにどこ打ってるのかわからない、カスタム御三家には対応していないぐらいしか問題点がないので、WordPressを用いてMarkdownでブログやらやっている人にはおすすめです。ちなみにこの記事もGustで書いてみたよ!!めっちゃ楽っすわ!!
それではよいMarkdownライフを\(^o^)/