2019/12/11サポートフォーラムで質問あったので、備忘録として。2015/12/17ローカル環境をVCCWで立ち上げるとWordmoveもインストールされていますので、サーバーとローカルのデータの同期がとても楽ですね。WordmoveはSSHとFTPのどちらも対応していて、今回はFTPで接続する必要がありました。ルート直下へのWordPress設置ではなく、サブディレクトリ(/wordpress/)への設置をしましたので、Movefileの設定は次のようにしていました。-dをするとエラーでリモートのデータベースに反映されません。(OpenURI::HTTPError)ぐぐると、Wordmoveのバージョンを1.2.0にダウングレードして対応するということがあったのですが、VCCWでインストールされているものは1.2.0でしたので、関係はなさそうです。反映されないバグを解決する方法エラーをよく見ていると、サブディレクトリが抜けているのがわかります。ディレクトリがないので404なんですね。http://test.com/wp-content/dump.php...仕様なのかバグなのか分からないですが、サブディレクトリはうまくいかないようなので、Movefileのvhostにサブディレクトリを追加してみます。herelocalの方は変えなくても大丈夫かもしれませんが、一応両方合わせておきます。-dでリモートのデータベースも反映されました。wp_optionのhomeとかも変わってしまいますが、wp-config.phpに次の設定をしておけば大丈夫なはずです。便利ですWordmove。Thisというブックマークレットを使用すると、他のサイトの閲覧中のページについて簡単に自身のWordPressに投稿できます。ポップアップしたウィンドウで403エラーになってしまいました。サーバー側のセキュリティ関係の設定が影響してるかなと推察して、PHPの設定などをみていたのですが、WAF設定のログを参照するとまさにpress-this.phpが検出されていました。wafなんかでぐぐってみると、WAFを無効にしたらいいよみたいな記事があったりするんですが、それはないでしょ、と他をあたっていると、ロリポの兄貴分ヘテムルのサポートページ(WAF設定により403エラーが表示される場合に関しまして)がありました。ヘテムルでは『.htaccessによる除外記述』というのをしてやるといいらしいのですが、ロリポにはそういう箇所はありませんでした。Thisで投稿ウィンドウが表示されるようになりました。fallbackが効かず何も表示されないという現象がありました。Video.jsのバージョンはv4.12.5です。原因はvideoタグに設定したwidthとheightがautoになっていたことでした。レスポンシブ対応のためautoにしていたので、そこはさわれないので、IE8用にCSSを追加して対応しました。modernizrを入れていましたので、videoタグに非対応のブラウザではno-videoクラスが付きます。それを使って次のルールを追加でOKでした。2015/02/21クラシックASPで構築されているサイトのコンテンツ制作のお仕事がありまして、ローカルで制作を行うのに、Windows上のIIS(インターネットインフォメーションサービス)でサーバーを設定してやる必要がありました。このサイトのお仕事は以前にも一度したことがあったのですが、Windowsで使うので、エディタとかもWindowsのやつを使ってたんですね。私はいつもMacでCoda2使って作業をしているので、サイト管理とか含めCoda2でできたらいいなと思いながらやっていました。それが、今回できてしまったので、かなり快適な制作プロセスになっています。8上にWindows7を入れて動かしています。制作はMacのCoda2なので、データもMac上においています。IISでWebサイトの追加をする際に、物理パスにMac上のフォルダも指定できますので、Windows上にデータがなくても問題ありません。ファイアーウォールいくつか解説ページがあったのですが、こちらのページの方法でいけました。(http://markchouanard.com/post/39426320201/access-iis-on-windows7-vm-from-the-mac-os)以下、日本語で手順を書いておきます。コントロールパネルからWindowsファイアーウォールを開きます。左メニューより詳細設定をクリック。左メニューの受信の規則をクリック。Webサービス(HTTPトラフィック)を右クリックでプロパティを開く。「有効」をチェックしてOK。ネットワークを共有ネットワークにParallelsのメニューで、デバイス-ネットワーク1-共有ネットワークになっていることを確認コマンドプロンプトでipconfig次にMacでhostsファイルに設定をするためにIPアドレスを確認します。スタートメニューから「プログラムとファイルの検索」欄にcmd.exeとタイプしてコマンドプロンプトを開きます。ipconfigとタイプしてからreturnすると次のような情報が表示されますので、IPv4アドレスをメモっておきます。Macの設定このままでもIPアドレスでページを表示できるのですが、hostsファイルに任意のアドレスを登録してわかりやすくしておきます。hostsファイルは/etc/hostsにありますので、先ほど確認したIPv4アドレスとお好みのドメインを設定してやります。ターミナルからでもテキストエディタを開いても、あるいはアプリを使ってもなんでもいいです。このあたりはいくらでも設定の仕方はみつかると思います。win.mysite.comこれでParallels上のIISにMac側からアクセスできるようになりましたMacのブラウザでwin.mysite.comとタイプすればWindows上のページが確認できます!Windowsでも同じURLで表示したいときはWindowsのhostsファイルをへんしゅうしてください。2015/02/21Web制作をしているといろいろなアプリを使うんですが、作業を始める前にいくつも起動させるのが地味に面倒に思っていました。ログイン時に常に起動させたいわけじゃないんだけど、頻繁に使うアプリのセットをまとめて起動できたらいいなという感じです。そんな便利アプリないかなとかググってたんですがどうも見つからず、代替方法として、「アプリのエイリアスをまとめて一つのフォルダに入れておいて、全選択をして一気に起動させる」なんていうのがありました。なんかもうちょっとスマートにならんかなと。思っていたらAutomatorがあるじゃないか、と。閃いたというほど大げさなものでもないんですが。複数のPDFをまとめたりするのにワークフローを使ったりはしてるんですが、正直あまり使うことがないので、長いこと思いつきもしなかったです。Automatorを立ち上げて、ファイル-新規を選ぶと書類の種類の選択ダイアログが開きますので、「アプリケーション」を選択します。左のユーティリティ内に「アプリケーションを起動」がありますので、これを右側のペインにドラッグします。必要なだけ追加したら保存して、Dockに登録するなりしてやると、一発でいくつものアプリを起動させることができます。2015/01/27フォーラムでギャラリーのデフォルトカラム値の変更という質問があって、先日の納品時にもちょっと気になったところだったので、対応を調べてみました。galleryショートコードをカスタマイズするにはpost_galleryフィルターでショートコードを丸々書き換えて、デフォルトのカラム数を4とかにすればいいのですが、これだと管理画面でギャラリーを追加する際にプルダウンは3のままなんですよね。管理画面でのビジュアルエディターでも3列に並んだままです。管理画面でのデフォルト値はmedia-editor.jsで設定されていて、javascriptだからフックとかもちろんないので、jQueryでページ読み込み後に上書きします。スクリプトの挿入はprint_media_templatesアクションフックを使っています。2015/01/21以前書いたWordPress:PDFのファイルサイズを取得して表示するショートコードとかPHP:PDFのファイルサイズを取得して表示するのにはまったので解決策をが、このサイトでは(少ないながら)わりと見に来られているようでしたので、以前からちょっとやってみたかったプラグイン申請をしてみました。kBのように適切な単位のついたファイルサイズが返ってきます。PDFに限らず、いろんなファイルのサイズが取得できますので、よかったら使ってください。KBプラグイン申請はこちらの記事にまるまるお世話になりました。2014/07/30アンケートフォームに画像を添付したいとのご要望をいただいて、今回はKENT-WEBさんのCLIP-MAILというフリーソフトを使用しました。UTF-Versionです。今回ロリポップ!でいくらかトラブルがあって、ググってもわりと古いサポート情報しか見当たらないこともあったので、まとめておきます。500エラーで表示されないこれはロリポに関して言えば、改行コードによるもののようでした。.cgiのファイルの改行コードがCR+LFになっているのをすべてLFに変換したら表示されました。添付ファイルが確認画面で表示されない添付画像をアップロードすると確認画面でサムネイルが表示されるはずなのですが、画像が500エラーでロードされない現象がありました。そのまま送信するとメールにはきちんと画像が添付されています。これはディレクトリのパーミッションが原因でした。ロリポはsuEXECサーバーになりますので、基本CLIP-MAILの説明ページにある通りuplディレクトリには700を指定していたのですが、707にしないと確認画面でサムネイルが表示できませんでした。入力エラー画面で項目の順番がバラバラになる必須項目が入力されていない場合などに、それらが後ろにいく仕様になっているようです。説明ページに下記のとおり書かれているのですが、これでは解決しませんでした。/>以下はコアプログラム(clipmail.cgi)をカスタマイズしますのでご注意ください。サポートの情報だとわりと端折った中上級者向けの書き方をされていてわかりにくかったので、ちょっと長いですが、該当部分を引用します。一箇所目は587行目くらいから。/>をhtmlのform要素に入れれば指定の順に並びます。ログデータをCSVでダウンロードできたりもするので、とても使いやすいファイルアップロード機能付きフォームだと思います。2013/11/20HTMLを書くときにdivやulなどのブロック要素のあとにコメントを追加することがありますが、それを自動化しよういうことです。下が展開後のイメージです。-->OZPAの表4でZen-Coding(Emmet)でコード展開時にクラス名・ID名のコメントを自動追加する方法という記事でコメントフィルターを追記する方法が紹介されていますが、もういっそ全部につけてしまいたいと、|cを入力するのが面倒くさいというわけです。|とか端っこすぎて打ちにくいんです。|cをつけるのであれば、上記のコードは展開前の状態ですと、div#container>p.hoge$*4|cとします。これを展開するとデフォルトではおそらく下のようになるかと思います。-->ちょっと最初の展開後イメージと違いますね。コメントが次の行に行っちゃうんですよね。これ、なにげに好きじゃないんです。好みなんですけど、やたらと行が増えると見にくい気がして。いうわけで、今回やることは、id、class属性がある要素は自動でコメントを追加するコメントは要素の閉じタグと同じ行に続けて追加するの2点です。あ、私が使ってるエディタはCoda2ですので、それ前提の話になります。他のエディタでどうするのか細かいことは分かりませんが、基本は同じだと思います。本家ドキュメントをご確認ください。カスタマイズ用のディレクトリを作りますカスタマイズするファイルは本体のファイルを直接いじるのではなく、カスタマイズ用のディレクトリを作って、その中に新たに作ったjsonファイルを放り込むことになります。ディレクトリはあとでパスをEmmetの環境設定で指定するので、どこに作っても構いません。私は下記のパスの通り、Emmetプラグインのパッケージの中のContentsディレクトリ内にHackというディレクトリを作成しました。2/Plug-ins/Emmet.codaplugin/Contents/Hackなお、すでにsnippets.jsonをカスタマイズして、langをjaに変更したり、スニペットをカスタマイズしている場合はこの工程は飛ばしてください。snippets.jsonをカスタマイズして、id、class属性がある要素に自動でコメントを追加する先ほど作成したHackディレクトリにあるjsonファイルは、自動的にEmmetに読み込まれますので、ファイル名はなんでも構いませんが、ここではsnippets.jsonとします。下記内容のファイルを作成し、Hackディレクトリに保存します。"html"}}前半のvariables部分は今回とは関係ないですが、日本語を使用するときはこれも入れておくことでhtmlタグに入れるlang属性がjaになります。キモとなるのはfiltersに設定している”html,c”のcです。“html”となっているのですが、cを加える事でコメントフィルターを通すことができます。Emmetの環境設定でパスを通すここまでで基本的なカスタマイズはできたのですが、このままでは展開してもなにも起こりません。カスタマイズしたファイルが入っているディレクトリをEmmetに教える必要があります。Extensions」ボタンを押すとHackディレクトリにあるファイルが読み込まれてカスタマイズが有効になります。preferences.jsonを作成し、コメントが要素の閉じタグと同じ行に続けて追加されるようにカスタマイズ下記内容のpreferences.jsonを作成して、先ほどのHackディレクトリに保存します。Extensionsボタンを押すと変更が有効になっているはずです。-->"}idやclassだけじゃなくて、他の属性もコメントに入れたい(そんなことあるかな?)というときは下記のようにすれば入りますよ。title属性を入れたいとか。-->"}もっとカスタマイズできることはたくさんあるみたいですので、Emmetのドキュメントを参照してください。Checkプラグインで出てきたNoticeを調べていたときに、下記の記事に行き当たり読んでいたら初めて聞く話だったので書いておきます。get_template_part日本語ではこちらの記事に優先順位のことが書かれていますが、情報が古いからか仕様が変わったのか分かりませんが、現在の最新版(WP3.7.1)とは順番が違っているようです。);のように使用すると、まずcontent-single.phpがあればそれを持ってきて、なければcontent.phpを持ってくるというような動作になります。content-single.phpcontent.phpの順序ですね。これが、子テーマを使用している場合にはこうなります。子テーマのcontent-single.php親テーマのcontent-single.php子テーマのcontent.php親テーマのcontent.phpget_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()関数を中で呼んでいるようです。2013/10/24以前PHP:PDFのファイルサイズを取得して表示するのにはまったので解決策をというのを書いたのですが、そのコードはテンプレートファイルからPHPコードで呼び出す前提でした。今回はショートコードを使用して、投稿エディターから呼び出すようにしました。pdfはwp-contentディレクトリの中にpdfディレクトリを作ってそこに入れている想定です。[追記]少し改訂したものをプラグイン化して公式ディレクトリに公開しましたのでよかったら使ってください。file='hoge.pdf']のように書けば、ファイルサイズ:1.2MBのようにファイルサイズが返されます。今回PDFにしていますが、他のファイル形式でももちろん問題ありません。2013/10/24投稿内でシングルページや固定ページ・カテゴリーページヘのリンクを貼ることがありますが、直接パスを書いてしまうと、公開URLの変更やディレクトリの移動などがあった場合にリンクが切れてしまいます。ショートコードにしておくとその辺りの作業から開放されるので便利です。MEMO:投稿内で記事・ページへのリンク・URLを出力するこちらのページでidを指定してURLを取得する方法を紹介されていたので参考にさせていただきました。個人的にidを使うのが分かりづらくて苦手なので、スラッグから引っ張ってこれるようにしました。引数はシンプルに2つだけ用意しています。slug='parent/hoge']//使うときはhref属性の中身です。slug='hoge'&#93;">ほげ</a>ちょこっと足せばカスタム投稿タイプにも対応できるはずです。Guide』での勉強続行中です。英語読むのしんどいですが、前に挫折した部分は超えて、前より少し分かってきたかも。先にConcrete5:ブロックのテンプレートを単純にラップするカスタムテンプレートを作る方法で、コアにアップデートがあっても大丈夫なカスタムテンプレートの書き方を載せましたが、ラップすると余計なdivを書くことになるので、できればクラス名だけ変えたいということもあるかと思います。Navというカスタムテンプレートを作成してみます。blocks/autonav/templates/my_nav/というディレクトリを作成して、その中にview.phpというファイルを作成します。本の中ではjQueryでゴニョゴニョしたり、このテンプレート専用のcssを設定することを前提にしていたのでカスタムテンプレート名のディレクトリを作成していましたが、ただクラス名を変更するだけのときは、blocks/autonav/templates/my_nav.phpでもいいと思います。今回はmy_navディレクトリにこのテンプレート専用のview.cssも配置する想定です。class="my_nav">',$buffer);}ob_start("my_nav_callback");include($bvt->getTemplate());ob_end_flush();?>前回のラップの時と似てますが、今回はデフォルトテンプレートを内部バッファに保存して、ulのクラス名を置換してから出力しています。これでmy_navというクラス名を使用したスタイルをview.cssに設定することができます。Guide』を初めから読みなおしています。オンサイドさんの記事はいっつもわかりやすくて勉強になります。