08. 11月 2014 · [WP] Search Regex でカスタム投稿タイプを対応させる方法 はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

ご無沙汰してます。ガッツリ制作シーズンに入った小杉です。

やー、レスポンシブサイトは Rootstrap を親テーマにして改造するとめちゃくちゃ速いということがわかりました。

それは置いといて。

 

文字列を置換できるプラグイン、Search Regex

/Everybody stand back/

Search Regex ってプラグイン。便利ですよね。

WordPress コンテンツ内の文言を検索したり、置換したりできるプラグインです。

公式サイト:WordPress › Search Regex « WordPress Plugins

ただ、更新が滞っているので若干心配ではありますが。

 

ローカル環境から本番環境に移行する際、エクスポートしたコンテンツのパスが変わるので、それを全部置換したいなと思って。

phpMyAdmin と FTP が使えない状況だったので、管理画面で何とかするしかないわけです。

ちなみに、ローカル環境からエクスポートしたデータはテキストデータなので、それを一括置換してからインポートするという方法もあります。

すっかり忘れてました。

 

まあ、そんなオッチョコチョイさんにもありがたいプラグインが、Search Regex です。

ありがたいんですが、カスタム投稿タイプに対応していないんですよね。

代替プラグインがあるかな〜?と思って探してみたんですが、見つからず。

そんなら、カスタマイズしてしまおうと。

 

ということで、ここからは自己責任です。OK?

中身なら、post_content.php を変えるだけ

plugins/search-regex/searches/ の中身が、検索対象を司っています。

その中に post_content.php があります。

10行目を以下のように変更します。

変更前

変更後

つまり、 AND post_type IN (‘post’,’page’) をカットしました。

カスタム投稿タイプに限らず、すべてを検索対象にしちゃえ!と少々乱暴ですが、意図としてはもれなく確認したいため。ひとつずつでも個別に置換できますしね。

 

同様に、タイトルの全置換は post_title.php かなって思いますよね。

ですが、ここには制限がありませんでした(笑)

タイトルは全部の記事を横断できるんじゃないかなと。

 

念のためバックアップをとっておき、ローカルで確認してから、本番の作業環境で実行しました。

特に問題なくガッと切り替わってくれました。オッチョコチョイさんでもチョチョイのチョイです。

良かったら試してみてくださいね╭( ・ㅂ・)و ̑̑

 

15. 1月 2014 · [WP]複数カテゴリに登録されている記事で previous_post_link と next_post_link を使う裏ワザ はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

お好み焼きは主食派はい、ごめんください。
ちょっと質問されたけれどもすぐに解決できない割には需要があるなあと思ったのでメモしておきます。誰かプラグインにしませんか。

まず、現状は下記のとおりです。

  • お好み焼きの記事Aがある。
  • 卵焼きの記事Bがある。
  • 記事Aは「おかず」というカテゴリーと「主食」というカテゴリーに登録されている。
  • 記事Bは「おかず」というカテゴリーに登録されている。

そしてこの状態で起こりえる問題があります。

  • 「主食」というカテゴリーから、お好み焼きの記事Aを閲覧した。
  • 次の記事として、卵焼きの記事Bへのリンクが出現。
  • 確かに記事Aは主食でもありおかずでもあるが、「主食」のカテゴリーから来た以上、「おかず」のカテゴリーに属する卵焼きの記事Bへのリンクは許せない。

お好み焼きはそれだけで主食だと思うのに、卵焼きは主食か否か。や、私は主食でもいいんですけどね。

つまり、閲覧元のカテゴリーと同じカテゴリーの前後記事を表示する方法

閲覧元を調べてリンクを出すのはできましたが、そのまた次のページに行くなど、閲覧元のカテゴリーをずっと引き回すのがそのままではできなかったので、Cookie を使いました。

functions.php に下記を追加します。

下の方はフォーラムのkzさんの投稿がすごく参考になりました。

参考:WordPress › フォーラム » next_post_link:特定カテゴリーの除外について

 

そして、single.php のナビゲーション部分を下記のように変更します。位置としては while 〜 endwhile; の中ですね。

ざっくりとした概要

  • カテゴリーページに行くと、表示したカテゴリーIDをブラウザが保存(上書き)します。
  • 個別記事ページに行くと、保存されたカテゴリーIDと同じカテゴリーの前後記事を表示します。
  • ブラウザを閉じたりトップページに行くと、保存したカテゴリーIDは削除され、カテゴリーページを表示しなければ、時系列での前後記事を表示します。

できてしまえば単純でした。

22. 6月 2013 · [WP] なくなったリンクの機能を5秒で復活させる方法 はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Anchorはい、ごめんください。
前に使ったことがあったのに忘れてしまって、使いたい時に使えなかったのでメモメモ。

WordPress 3.5 以降から、左側のメニューからリンクが消えました。

以前からリンクの機能を使っていて、バージョンアップされているかたは問題なく表示されていますが、新規でインストールすると消えています。

ちょっとしたバナーの管理とかしやすかったんですがね。

プラグインを使わなくても function.php に1行書けば一発 OK

リンク機能がなくなった!でもこのプラグインを入れればOK!というものはあります。それが Link Manager というプラグイン。
公式プラグインなので、検索してインストールすれば OK です。

ただ、プラグインのソースを見てみると・・・

link-manager.php in link-manager/trunk – WordPress Plugin Repository

・・・実質一行!!

というわけで、下記の一行を function.php に入れておくだけで、リンク機能を使うことができます。要するに、機能は存在しているものの、それを表示していないだけなのですね。

表示されていないということは、今後そのまま消滅する可能性があるとも言えます。その場合はカスタム投稿タイプを利用して、リンクを管理すると良いでしょう。

カスタム投稿タイプは難しそう…と敬遠している方は、これこそプラグインを使って管理すると良いでしょう。

WordPress › Custom Post Type UI « WordPress Plugins

私は他に投稿タイプを使う予定もなかったので、しばらくはリンクの機能を復活させて使います。

inkscapeはい、ごめんください。
このブログは備忘録として使っているのですが、情報を発信するためのサイトを別途作成中です。そのためのロゴやらイラストやら作るためには、やっぱりベクタデータが扱いやすいんですよね。

でも、Adobe Illustrator は高くて手が出ない!という時に便利なのが、Inkscape。
イラレに慣れてしまうと若干使い勝手が違うので戸惑ってしまいますが、無料のソフトかつUSBにも入れて持ち運べるポータブル版もあるので、ちょっと作りたい時にオススメです。

Inkscape Portable(Windows版)をダウンロードしてみた

Inkscape 公式サイト
Inkscape 公式サイト(ダウンロードページ)

Windows 7/Vista/XP の portable というところからダウンロードして、インストール先をUSBなどにすると良いです。個人的にはレジストリを汚さないのが嬉しい。

is_install01

インストールする際に多言語オプションを求められますが、上図のようにチェックを入れておけば環境設定から日本語を選ぶことができます(2013年4月30日現在、ver 0.48.4)。

Inkscape の日本語化は設定してソフトを再起動するだけ

InkscapePortable.exe をダブルクリックすれば起動しますので、File -> Inkscape Preferences… (Shift+Ctrl+P) を開きます。

is_install02

左側から Interface を選び(下から4つめくらい)、右側の画面で Language を Japanese (ja) にします。あとはこの設定画面と Inkscape のウインドウをすべて閉じ、再度 Inkscape を起動してください。

Inkscape でいつも戸惑うのは、OK とか適用のボタンがないところなんですよね…(選んだ時点で適用されます)

Inkscape の日本語フォントを変更するよ

Inkscape を再起動して、日本語になったと喜んだのも束の間、インターフェイスのフォントが汚い!設定を弄る方法としては2通りあります。

インターフェイスの設定ファイルを変更する方法

1つめは、インターフェイスの設定ファイルを変更する方法。書体以外にも文字の大きさを変えたい場合にオススメです。

Inkscape の インストールフォルダ内の App\Inkscape\etc\gtk-2.0 を開きます。その中に gtkrc という拡張子なしのファイルがあるので、それをテキストエディタで開きます。

一番最後に、下記を追加してください。今回はメイリオ、8pt を指定しています。フォント名のあとの数字がフォントの大きさになります。8はやや小さめ。また、「MS UI Gothic」や「MS PGothic」も指定できますが、Windows7 ならメイリオで良いかと。

上書き保存したら Inkscape を再起動して、メニューのフォントが変わっていることを確認してください。

is_install06

書体の定義を変える方法

参考:InkscapeのUIフォントを直す – Weblog – hail2u.net

2つめは、フォントの定義を変える方法です。「sans」という枠にフォントの候補を設定します。CSS で言う font-family の指定に似ていますね。

Inkscape の インストールフォルダ内の App\Inkscape\etc\pango を開きます。その中に pango.aliases というファイルがありますので、テキストエディタで開きます。

に変更して保存、Inkscape を再起動してください。sans に segoe ui と meiryo を追加しただけです。

is_install05

英文フォントして segoe ui が優先され、日本語フォントはメイリオになります。メニューのショートカットのフォントで違いがよくわかるかと。

どちらもそんなに難しくはないので、お好きな設定をお選びください。ちなみに、両方やっても1つめの設定ファイルの方が優先されます。

それでは、素敵な Inkscape ライフを(^ω^)

Writing Notes with Grammyはい、ごめんください。
音楽聞きながら仕事してたら、やけに捗って遅くまでテンションあがってしまったひじりです。お肌が荒れて困りますわね奥さん。

さて、お客様が WordPress を使うにあたって、プレビュー機能があるとはいえ、やはり編集画面は実際の画面に近いほうがいいよね、ということで色々カスタマイズしていたのですが、一気に便利になった方法がありました。

editor-style.css にスタイルをコピーするのがメンドクサアァァァイ!!

管理画面のスタイルは editor-style.css をテーマ用ディレクトリに作成してゴニョゴニョするのですが、クラスとか増えるたびコピーするのが面倒になってきました。最後にやる作業であることは間違いないのですが、今後も増えてくるだろうなと。
そうすると、適用されている CSS をそのまま使えたらいいのになー と、思うわけです。コピーするのがメンドク(ry

管理画面の細かいカスタマイズについては下記サイトが参考になります。
WordPressのTinyMCEをチキチキにカスタマイズする | 高橋文樹.com
WordPressテーマのfunctions.phpでは$content_widthを定義するべし | firegoby

まずは使ってる CSS を呼んで設定を足そう

editor-style.css を使えるようにするには、add_editor_style という関数を使うのですが、これは CSS を有効化するためのものではなく、読み込むための命令なんですね。ということは、他の CSS も読み込めるわけです。いくつでも良いみたいですよ。

また、テーマ内で投稿内容が反映される場所って、大抵 class や id の指定がされています。例えば、デフォルトテーマの Twenty シリーズだったら #primary とか。投稿画面=投稿内容が反映される部分 と考え、class もしくは id を設定しましょう。class は知ってたけど、ダメ元で id やったら適用できました(・ω・)

早速 function.php に下記の内容を追記。editor-style.css はひとまず空っぽのまま作っておいてください。css フォルダに置いてあるような css は、function.php からの相対パスを設定してください。

これで設定した CSS が読み込まれます。プラグイン使わないと、かゆいところに手が届いて良いですね。
編集画面を確認すれば、表示が変わったのがわかるかと。chrome などの開発用ツールで確認しても読み込まれているのがわかるかと思います。$initArray[‘body_id’] を使ったら、ちゃんと body に id が設定されました!

そして editor-style.css で調整

このままだと、「body に背景は設定してて #primary は白いんだけどなあ」という場合などに対応できていません。それを editor-style.css で差を吸収します。下記は一例です。

あとは、style.css などで設定した class などがそのまま使えるので、theme_advanced_styles(TinyMCE Advanced だとスタイルを選べる部品)とか有効にしてるとずらりっと出てきます。これは逆に使いにくいかもしれないですが…?

管理画面のカスタマイズに躊躇していた方も、ぜひ一度お試しください♪

23. 12月 2012 · [WP] Tweet Old Post が自動投稿されないのでソースを直したよ はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Twitter先日、日本語化を行った Tweet Old Post (4.0.3) ですが、イマイチ自動ポストされないのでソースを見なおしてみました。

wp-cron にスケジューリングされているわけではないようなので、何がトリガーになってるのかなと調べたところ、init で呼んでることがわかりました。つまり、ページを読み込むたびに呼んでるんですねえ。

add_action(‘init’,’top_tweet_old_post’);

init
WordPressの読み込みが完了し、ヘッダーが送信される前に実行する。$_GET や $_POST トリガーを妨害するために使える。

wp-cron も擬似的な cron で、誰かのアクセスをトリガーにして動作するため、アクセスが少ないとうまく動作しないかもしれません。ですが、これはちゃんと動いていることが判りました。

[Tweet Now] ボタンで投稿はできるので、この辺りを追ったところ、どうやら初期の設定で「最初にツイートした時間」が登録されないバグがあるようでした。wp-cron にでも入れようかと思いましたが、ここを解決したら動いたので、メモ。

top-admin.php の更新完了部分( //successful update message を探すと良いです )で、1行を追加します。

top-admin.php を書き換えたら保存し、設定画面で設定内容を保存します。
これで最終ツイート時刻を設定できるので、あとは○時間後に(アクセスがあれば)動作します。

もし自動的に動かないよー、という方はお試しください。

29. 11月 2012 · [WP] バナーは wp_list_bookmarks と GA でイベントトラッキングすることにした はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Pretty Awesome 3D Metal WordPress Logo内部コンテンツへ誘導するためのもので、広告とは毛色が違い、URLが長くなるとちょっとイヤンな感じだったので Ad Rotate はやめました。

でもどれくらいクリックされたのか追跡したいので、管理しやすくすることも踏まえ、WordPress のリンク機能と、Google Analytics のイベントトラッキング機能で対応することにしました。

2012/11/30 追記:onClick → onMousedown に変更してみました。アウトリンクのタイムラグで取得できない場合もあるのね…なるほど。

参考:Googleアナリティクスでの外部リンククリック計測3つの手法の利点と欠点を整理してみた | Web担当者Forum

まずはリンクに登録

カテゴリーを設定し、バナー(今回はアフィリエイトリンクではなく、内部コンテンツへ誘導するものを指します)のタイトル、リンク先、画像URLを設定します。

テーマファイルに設定

リンクに登録したものは、 wp_list_bookmarks で呼び出せます。
ただ、標準機能ではアンカータグの内部に属性として値を設定することが出来ないため、PHPでちょいと置換してあげることで対応できます。ちなみに、Google Analytics をすでに導入済みであることが前提です。(ヘッダに非同期用のスクリプトが入っていること)

[CAT_ID] にはリンクのカテゴリーIDを入れてください。

$ga_tracking の [category] は、たとえば BannerClick などが良いでしょう。[action] は特に”アクション” にこだわる必要もないので、カテゴリースラッグあたりを入れておけばわかりやすいと思います。たとえば sidebar とか。

上記では p タグで縦に並べて表示させたかったのですが、設定項目は本家のパラメータを参考にしてみてください。

参考:テンプレートタグ/wp list bookmarks – WordPress Codex 日本語版

これでテーマファイルを保存すると、トラッキング用のタグが入っているのがわかるでしょうか。これで広告やバナーの管理がだいぶ楽になるのではないかなと思います。

PHPがよくわからないからどう書けばいいのかわからないーという方は、コメントくださいな。

In writing

2012.10.29 追記:もう1個追加しました。

プラグインの導入時に気をつけなければならないのは、環境によってはパーミッションが755になったり、所有者の設定が nobody になったりしてうまく動作しない場合があります。ありました。

  • プラグインとその下層フォルダ(css, csv)は 777 にした方がいい。(プラグインフォルダは755でも良いのかも)
  • css フォルダ内に生成されるフォームごとの CSS は、自分で書き換え権限があったほうが、管理画面以外からでも編集できる。

プラグインのインストールについては割愛します。ダウンロードは下記から。

WordPress > Trust Form ≪ WordPress Plugins
参考:Trust Form-1.2を公開しました | カクニンプラスのweb日誌

元々カスタマイズを前提に作られているもののようなのですが、クラス拡張とか下手くそなので元のソースを弄ったりしています。(でも Advanced Field の使い方がわからない。これも拡張用かな?)
ご利用は計画的に、自己責任でお願いします。

1. checkbox と radio には label をつけて、radio は選択させときたいな!

元の trust-form.php を弄ります。
ユーザビリティ的には必須だと思っているので、まず第一に修正しました。1990行目のあたりかな。
checkbox と radio の出力の際、<label> ~ </label>で囲みました。

それと、radio については何も選択がない場合に一番最初の項目を選択済みに。foreach で 0 番目の項目だった場合にチェックする、という条件を入れました。これは好みというか、TPOに応じていれてください。

そうすると、こんなソースになります。

こうすると、label にスタイルを効かせることができるので、わかりやすい装飾が可能になります。

2. エラーがあった時にメッセージを表示させたい

エラーメッセージを項目ごとにしか取得できない(私が見落としているだけかも)ようなので、function を追加して使えるようにしました。

trust-form.php の1795行目辺りに下記を追加。

これをどういう時に使うかというと、trust-form-tpl-[ID].php の trust_form_show_input() 内で、

というメッセージを表示させることができます。日本語そのまま使うときは、UTF-8で保存してくださいね。

3. サブメッセージを入力欄の下に表示させたい

trust-form-tpl-[ID].php の trust_form_show_input() 内で、$html が制御しているので入れ替えてあげれば良いです。ついでに、必須項目の th にも require クラス入れたかったので、下記のようになりました。

4. URLが同じになってしまうのでパラメータを付ける

アクセス解析の際にはページ名が同じだと解析しにくいので、form の action にパラメータをつけてあげましょう。
trust-form-tpl-[ID].php を編集します。

trust_form_show_input() の form タグの

これを

とします。#trust-form はフォームを入力して次の画面に遷移した際、ページ内リンクが有効になるのであっても取っても可。

もうひとつは、trust_form_show_confirm() の form タグの

これを

とします。#trust-form については上記同様。

これで、
入力画面は 固定ページのURL となり、
確認画面は 固定ページのURL?confirm となり、
完了画面は 固定ページのURL?finish となります。

5. 郵便番号を入力したら住所を自動取得したい

郵便番号からの住所取得もできます。そう、ajaxzip3 ならね。

ajaxzip3 – 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。 – Google Project Hosting

本来は head タグ内に読み込むものなのですが、固定ページのコンテンツ内でも動きました。(とりあえず確認したのはchromeのみ)

1) 固定ページ内で、Trust Form のショートコードの前に下記のように javascript を読み込みます。

フォームがSSLになる場合はこっち↓

2) 郵便番号の項目を設定して、class に zip と入れて、その下に住所の入力項目を設定します。

3) 別途読み込んだ(※) js ファイルに下記を追加。

※別で jQuery を使ってゴニョゴニョしていることもあるので、

としてオリジナルの js ファイルを読み込んでおくと色々追加できるのでオススメです。

これで半角数字で郵便番号を入れると、住所が表示されます。ハイフンのあるなし関係ないので、結構キモチイイ。

6. 共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。フォームのスタイルを統一しているので、増えると管理が面倒なんですよね…。trust-form.php の940行目あたりを下記のように変更します。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。

ContactForm 7 より癖がありますが、何より確認画面が表示されるのは素敵!どんどん使って行きたいですね。

12. 10月 2012 · [WP] 先頭固定にする記事が出てきてしまう場合の対処法 はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

sticky tags mean "learn me later"
今日もフォーラムのネタ。

WordPress › フォーラム » WP_Queryで先頭固定指定後、次のWP_Queryがデータを引きずってしまう

今回のフォーラムの質問は「前のデータを引き継いでしまう」という観点でしたが、実は「カテゴリーでフィルタリングしても先頭固定記事が出てきてしまう」というところにありました。

この問題に気づくまでにかなりハマって時間がかかってしまったのは、ここだけの話。SQL のリクエストは正常に帰って来てるのに、$post を var_dump すると求める記事以外にも取得してしまう…そんな風にハマってました。

結論を言ってしまうと、強制固定を解除するパラメーターを渡してやるだけ。

→ 結果:先頭固定記事>カテゴリ3以外の記事 の順で表示

ここに ignore_sticky_posts を追加すると

→ 結果:カテゴリ3以外の記事を表示

参考:テンプレートタグ/query posts – WordPress Codex 日本語版 – 4.10 先頭固定投稿引数

英語ですが、ちゃんと書いてありましたね。

参考:”この投稿を先頭に固定表示”とquery_posts() | firegoby

そして行き着くところはやっぱりこちらのサイト。いつもお世話になっています。

11. 10月 2012 · [WP] 「続きを読む」を画像にする はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Arrow

フォーラムのネタができたので。

WordPress › フォーラム » the_excerpt()で「続きを読む」を画像にしたい!

やりたいこと:

  • excerpt_more で設定されている […] の部分を画像にしたい
  • マウスオーバーした時に画像を切り替えたい

1. リンク用の画像を1枚用意します

通常時とマウスオーバー時の画像を1枚にします。
つまり、高さか幅が、表示したい大きさの倍になりますね。

続きを読む を画像にするよ

上の画像の場合、16px × 16px で表示させたいので、16px × 32px で作成しました。
テーマの関係で右側に動かしたいので、右側に通常用の画像、左側にマウスオーバー時の画像を配置します。
これを readmore.png というファイル名で、テーマディレクトリの images に置きます。

2. function.php に追記します

下記のコードを追加します。

class の指定と title の指定がポイント。classはあとでスタイルを設定します。
マウスオーバー時にツールチップを出すため、titleにも「続きを読む」を入れてあります。get_the_title() を入れてもOK。

3. style.css に追記します

下記のコードを追記します。

display は inline-block にすれば行中に、 block にすれば改行して表示します。

height と width は本来表示させたい大きさを設定します。

text-indent はアンカータグ内の文字を表示させないためのものです。よく-9999px とかされてますが、適当でいいと思ってます。

.readmore:active, .readmore:hover でマウスオーバー時の挙動を設定します。

画像の例がちょっとアレかもしれないのですが、サンプルはウチのトップページで動いています。
ご質問等あればお気軽に~