カテゴリー別アーカイブ: WordPress

wordpress

WPショートコードの書き方メモ

 

ロリポップ!に設置していあるWPが軒並み乗っ取られている件で、やっぱり投稿とかページでPHP動かせるようにするのはやめました。
代わりにショートコードを使います。

ということでショートコードの書き方メモ。

function.phpにショートコードの定義を追記。

例 パーマリンク取得

function geturl() {
	return get_permalink(); 
}
add_shortcode('url', 'geturl');

add_shortcodeというのが、WPの関数で、この第一引数に呼び出しに使う名前(投稿やページに記述する名前)、第二引数にFunctionで定義した、実行したい挙動を書いた関数の名前を記述します。

ウィジェットでショートコードを使う

ウィジェットでもショートコードを使いたい場合は以下をfunction.phpに追加。

add_filter('widget_text', 'do_shortcode');

で、HTML側での記述(呼び出し)は第一引数を書く。

[url]

リンク貼りたいときは↓

<a href="[url]">

こっちはプラグインで使ったことある人も多いはず。
sitemap作成系とかフォーム作成系のプラグインとかで呼び出したいところで書いてますよね。

もちろん中にif文とか書くこともできるし、ショートコードの中にショートコードを書くこともできます。

テンプレ内でショートコードを呼び出す

テンプレート内でショートコードを呼び出したい時は以下で呼び出せます。

<?php echo do_shortcode('[url]'); ?>

ショートコードのネスト(入れ子)

ショートコードをネストさせたい場合は、「do_shortcode();」を使います。

私の場合、特定ページや投稿を、パーツとして呼び出すというようなショートコードや、画像パスやルートのURLを呼び出すようなショートコードを割とよく使うのですが、
「ショートコードで呼び出したいページの中に、画像パスをショートコードで書いてある」
とかいう【ショートコードのネスト】状態は、このままでは機能しません。

ショートコードをネストさせたい場合は、「do_shortcode();」を使います。

function 関数名() {
   return do_shortcode(処理内容);
}
add_shortcode('呼び出し用名前', '関数名');

こんな感じです。

wordpress

WPテンプレートタグメモ

 

良く使うWPのテンプレートタグを自分用にメモ。使うものから順次追加。
※順不同。解説が欲しい方は⇒テンプレートタグcodex

Wp-contentディレクトリのパス取得

<?php echo content_url();?>

テーマディレクトリのパス取得

<?php echo get_template_directory_uri(); ?>

ドメインをパスで取得

 <?php echo home_url; ?>

↑の応用特定URL

<?php echo home_url( '/第2階層/第3階層/' ); ?>

⇒テンプレートタグcodex

wordpress

【WordPress3.6】ヴァージョンアップに耐えられなかったプラグイン

 

WPをバージョンアップしました。
2013年8月時点で最新は3.6です。
3.5.2以前で改ざんリスクが注意喚起され、サクラインターネットとかヘテムルとか各サーバからも最新バージョンにせよとのお達しがありましたので、3.5.2以前をお使いの方は早急にバージョンアップされることをお勧めします。
因みに、知人にも改ざん被害者がいました。結構広範囲に被害が出てるみたいです。

いまやWordPressのバージョンアップはワンポチでできるので、やり方とか何も書くことはありませんが、
利用していたプラグインで、一つ使えなくなったものがあったのでご報告がてら記載します。

【WP3.6.2で不具合のでたプラグイン】
Wp-lightpop

画像とかをクリックしたときに、画面遷移せず、背景色を落として画像を浮かび上がらせる、ご存知lightbox系のプラグインです。
FireFoxとChromeでは問題ありませんでしたが、IEではヴァージョンに関わらず、ヘッダー画像が固定(fixed)されてしまいました。
※このサイトはもともとヘッダ画像ありませんので問題ありませんでしたが、他のサイトで、スクロールすると記事部分ヘッダー画像が重なるようになっちゃいました。

IEの開発者用ツール(F12押すと出てくるやつ)で確認すると、どうやら、勝手に<body>タグが改造されていました。
こんな具合に⇒<body style=”background-attachment: fixed;”>と勝手にスタイルを追加してました。
もちろんテンプレートにはそんな記述ないし、他ブラウザは問題ない。

ということでプラグインを停止していってみると、Wp-lightpopを停止したところで直った。
見てみると、このプラグイン、もう2年も更新されていなかった。
どうやらこれのjsが影響しているようだとのこと。

代替にはWP jQuery Lightboxを入れてみた。
3.6ではテストされていないみたいだけど、3.5.2は対応済だし、最終更新が2か月前なので、多分今後も更新されると期待を込めて・・・。

WP jQuery Lightboxを有効化すると、管理画面左メニューの設定箇所に「jQuery Lightbox」が追加され、ここで設定ができます。
が、デフォルトで一般的な設定がされているみたいで、有効化だけで問題なく動いた。

尚、フォーラムで聞いたのだけど、WP3.6では、WP本体に同梱のjQueryがアップデートされたらしいので、他にも古いプラグインには影響があるかも?
今回みたいにアップデート自体がされなくなっちゃうと、なかなか気づかないので気を付けられたし。

 

wordpress

【WP プラグイン】「Trust Form」をカスタマイズしてアナリティクスのコンバージョンに設定する方法

 

————-【注意】————-
2016年10月現在、Trust Formは、脆弱性のためWPの公式リポジトリから取り下げられているそうです。
開発者の方のFBにて脆弱性についてご対応中との記載がありました。
復活を期待しております。
※ご利用中の方はご注意ください。
—————————————

WPのフォーム作成プラグイン「Trust Form」のカスタマイズ。
問合わせ完了ページをアナリティクスで目標としてコンバージョン設定がしたかったのだけど、
cgiとかでも良くあるように、確認画面→完了画面でURLが同じため、カスタマイズ。

————-【追記】———————
※プラグインファイルはあまり直接弄るべきものではない。
ということで、Trust Formはカスタマイズできるようにつくられているようなので、直接trust-form-tpl-.phpはいじらないほうが良いようです。
trust-form-tpl-.phpをコピーして「trust-form-tpl-777.php」(777の部分は、フォームのID)と言う名前で保存⇒テーマファイル直下にアップ(プラグインフォルダじゃなくて、テーマフォルダ直下。)。
これで、trust-form-tpl-777.phpを優先してくれるらしいのでtrust-form-tpl-777.phpの方をいじりましょう。
参考⇒FormのHTMLを直接カスタマイズする
———————————————-

プラグインの中身を見たら、テンプレっぽい名前のファイル「trust-form-tpl-.php」がある。
この中で、デフォルトのパラメータ「#trust-form」を検索したら、ちょうど2つ見つかったので、ここを変更してみる。
具体的には↓
1行目からはじまるfunction trust_form_show_input() が入力画面。
この中にある form action=”#trust-form” method=”post”

が確認画面にパラメータを渡しているところっぽいので、ここを変更してみる。

<form action="#trust-form" method="post" >

<form action="?confirm#trust-form" method="post" >

※confirm のところはkakuninでもなんでも任意で。

同様に、確認画面は46行目あたりからはじまるfunction trust_form_show_confirm() の中。
55行目あたりに完了画面に渡すパラメータが設定されているのでここを変更。

<form action="#trust-form" method="post" >

<form action="?thanks#trust-form" method="post"></form>

———-2014/9/11 追記————
コージさまよりご指摘いただきました。お尻の</form>は不要です。trust-form-tpl-.phpにもそもそもこのお尻部分はついてませんね・・・。
ご指摘ありがとうございました。
————————————

これで、確認画面と完了画面のURLにパラメータがつくはず。
それぞれのページにアクセスし、パラメータがついていたら、そのままの状態でアナリティクスのリアルタイム解析を確認。
すると、確認画面?confirm= 完了画面?thanks= となっていたので、これを目標に設定して完了。

因みに初めは、送信ボタンにイベントを仕込もうとしていたのだけど、アナリティクスがまた「Universal Analytics 」なるベータ版をリリースしてる・・・。
これはあとで変更しなくちゃならなくなったら嫌だな・・・と思い、確認画面や完了画面のURLにパラメータをつける方法に思考チェンジして、↑のように。

wordpress

背景をフルサイズの動画にする 【mb.YTPlayer for background videos 】

 

サイト背景をフルサイズの動画にするプラグイン。

背景を動画にするのはBigVideo.jsっていうjQueryでできる。
BigVideo.js - The jQuery Plugin for Big Background Video
⇒⇒⇒BigVideo.jsのデモページ

このjQueryの使い方は、colissさんの記事が参考になる。

で、これと同等のプラグインをいくつか調べていたら、mb-ytplayerというのがあって、これにはWPのプラグインがあるみたいなので入れてみる。
公式プラグインなので、←のリンクからでも、WPの管理画面>プラグイン>新規追加からキーワド入力でも簡単に見つかります。
私が入れた時点では、プラグイン新規追加画面の評価は★5つでした。

使い方は、説明するまでもなく超簡単。
プラグイン新規追加>有効化>左メニューの「設定」内に「mb.YTPlayer」というのが追加されているので、ここで設定するだけ。
日本語化されていなくても、やさしい英語で書かれてるので、多分普通の人であれば問題ないはず。
(chromeが勝手に翻訳した日本語の方が意味不明だった。)

「home video: url」ってとこに、YoutubeのURLを入れるだけ。
「home video: start at」ていうのが、デフォルトだとfalseになってるので、適当な数字を入れてあげる。
「0」だと動かなかった。0.1でも0.01でも動いた。
あとはコントロールを付けるかとか、透過度とか、ループとかが簡単に設定できるのでお好みで設定して完了。

尚、オリジナル動画を使いたければ、一度Youtubeにアップする必要あり。
現状、動画はYoutubeしか対応していないみたいなので、自サーバに動画上げて・・・ってことはできないみたい。

とりあえず無料映像素材でググったら、羽の動画を設定してみる。
元の背景画像がリリアン・ギッシュだからちょっとデザインちぐはぐだけど、ひとまず実験ということで・・・。
良い無料素材、Youtubeにないかなー・・・・

 

【2013/9/3 追記】
素敵な動画素材を探す暇もなかったので、プラグイン停止しました。

 

wordpress

WPのカスタム背景を無効にする

 

本当にやりたかったのは、カスタム背景の無効化じゃなくて、カスタム背景で出力されるCSSの修正なのだけど、カスタム背景のCSSは、wp-includes/theme.phpで指定されているっぽい。
(これを見つけるのに、二日かかった・・・。)
因みにテーマはtwentytwelve

変更したかったのは、
background-position: left top

background-position: center top

だけどやっぱりincludeフォルダ内をいじるのはアップデートの時とか面倒なので、変更は諦めて、カスタム背景を無効にすることに。
function.phpに以下を追記。

add_action( 'after_setup_theme', 'my_remove_custom_background', 11);
function my_remove_custom_background() {
  remove_theme_support( 'custom-background');
}

これで無効化されたはずなので、あとはstyle.cssをいじるだけ。

参考にさせて頂きました。

wordpress

wordpress.com から wordpress.orgへお引越し

 

以前wordpress.org から wordpress.com にお引越ししたのだけど、やっぱり無料だとあまりにできることが限られ過ぎていて、結局モトサヤ・・・。
今度はwordpress.com から wordpress.orgへお引越し。
サーバはさくらインターネット。
ドメインはバリュードメイン。
そんな環境にお引越ししました。

2013年5月9日現在、使用テンプレートはWPのデフォルトテンプレートであるtwentytwelve。
他にも素敵なテーマはたくさんあるけど、デフォルトテーマをどれだけいじり倒せるかということに挑戦してみようかと思ったり、
なんだかんだ言って、デフォルトテーマはやっぱり良くできたテーマなんだろうな・・・とか思ったので、しばらくはこのままにしてみようかと。

やっぱりいろいろいじれるほうがいいね。

因みに元サイトは

http://memotool.wordpress.com/

サーバも触れなければプラグインも入れられないので、元サイトは全て記事非公開にしたものの、重複対策は何もできない。
とりあえず表示設定の「」っていうnoindex指定と思われるところにチェックを付けただけ。
これで上手くいくと良いなー。

Tool

duda mobileでスマホサイトを作成、自動変換を試みる。

 

duda mobileというのをつかってスマホサイトを簡単構築してみた。
このサイトのテーマはレスポンシブにはなっているのだけども、スマホになると、かなり味気なくなる。
(レスポンシブビューならそんなことないけど、実機でみるとアイキャッチが全部消える。)

しかし、テンプレもCSSもサーバもいじれないので、金を払う以外にいじる術はない。
そんなところ、去る11月28日頃、Googleがスマホサイト自動化ツールをリリースしたとの情報が。

これ↓
GoMo と DudaMobile が提供するスマートフォン対応サイト作成ツールで、PC サイトをわずか数分でスマートフォンに最適化!

さっそくやってみました。

まずテンプレートを選ぶ。

テンプレートを選びます

選択すると、カスタマイズボタンが出てくる。
リストやボタンのデザインが選べます。

「下」を選んでみた

「下」を選んでみた。
「下」だけ、メニューが固定されていて、スクロールしても、どこへ移動しても、必ず視界に入るので、これにしてみた。

ナビゲーションの設定

続いてナビゲーションを設定。
いらないものを隠したり、特定のページだけをメニューに入れることもできる。(ここの使い方が一番分かりにくかった。)

ナビゲーションを追加する方法を1個だけ選ぶ。

はじめ、メニューが一個もなかったので、「新規ページ」を作って、それにリンクを設定してたけど、これじゃ無駄な空ページがたくさんできる。
WPでメニュー追加するときに、まず項目作って、それにリンク先を設定するから、それと同じ感覚でやったのが失敗でした。
(ラジオボタンになってることに早く気付けばよかった)

いらないコンテンツを削除する。

次はいらないコンテンツを削除。
ヘッダーにタイトル入ってるので、コンテンツエリアのタイトルは削除。
この時、「すべてのページから削除」を選んでおかないと、後で全ページ、コンテンツをちまちま削除することになる。(多分。)
私はこれにもハマって、詳細設定のCSSやHTMLで変更しようとしたんだけど、結局これも1ページごとにしか変えられないみたい?で結局戻ってやり直した。

サイトを保存する前にアカウント登録。

大体できたら、保存。
保存するにはアカウント登録の必要があります。
メアドとPWを設定するだけでOK。仮登録→メールで認証・・・みたいな手順は踏まないので、煩わしさはない。

Dashboard  DudaMobile でスマホサイト完成

登録したら、スマホサイトは完成。
だがしかし・・・・。
URLはmobile.dudamobile.comというドメイン下にディレクトリが作られる形になる。
まぁ、そもそも私は独自ドメインを捨ててるので、それ自体はそんなに気にしないのだけど、やっぱり、PCとスマホでドメインが変わるのはちょっと・・・
と思いながらチュートリアルを進めると、どうやらWP用のプラグインがあって、スマホによるアクセス時は自動でリダイレクトし、ドメインも「m.自分のドメイン」っていうサブディレクトリになるらしいことが判明。↓

リダイレクトできる・・・だがしかし・・・!

ここで出てきたのが、そう。。。。プラグイン。WPの大きなメリットの一つであるプラグインだが、wordpress.comでは追加する術がない・・・。

ここまでできて・・・断念。
せっかく作ったので、とりあえずメニューにねじ込んで無理やり遷移させる方法とってみた。
ヘッダーとかフッターに埋めたいとか、初めからそっちに飛ばしたいとかいろいろ望みはあるんだけど
んー・・・やはり全部無料ってのはなかなか厳しい。

ちょっと使用感は直感的…とは感じられないような場面もあった(私が鈍いのかもだが)けど、それでもマニュアルとか一切なしで、時間もそんなにかからずスマホサイトが構築できたので便利。

ちなみに、このスマホ自動変換ツールは1年間無料で使える模様。
それ以上の期間使う場合は、お金払ってね。っていうGoogle Sites とかと同じシステムですね。

出来上がりはこんな感じ

Dashboard  DudaMobileで作ったみたよ
生成されたURLは→http://mobile.dudamobile.com/site/memotool_wordpress

再編集しようとしたら、ログイン画面をなかなか見つけられなかったので、最後にメモ。
http://gomo.dudamobile.com/login
単純に/loginだけど、もうちょっとわかりやすいところにあっても良いかとおもうんだけど・・・。

wordpress

【コメントアウトができない】WPのちょっと困った仕様

 

WPは記事やページ内でHTMLのコメントアウトができない。
タグが勝手に変換されてしまうのが原因。(←このせいで上手く行かないことが多い気がする。数年前はプレビューでスタイルが変わっちゃったりとか。ビジュアル開いちゃうとphpが壊れるのは今でも?)

ググったり、コーデックス見たりしても対処法を見つけれずにいたのだけど、ようやく方法を教えてもらったのでメモ。
ググり方がわるかったのか?

■ショートコード編。
MTで言うみたいなやつをショートで作る。
場所はおなじみfunction.php

<?php
function ignore_shortcode( $atts, $content = null ) {
    return null;
}
add_shortcode('ignore', 'ignore_shortcode');
?>

コメントアウトしたいところを[ignore] [/ignore]で囲うとコメントアウトできる。 しかし、↑を書いたWPでは動かず・・・。ホワイト画面になってしまった。。。 何かと競合?? ということで、別案。 勝手に変換してくれる部分の機能をコメントアウトしてあげる。 直接default-filters.phpをいじってもOKだけど、「default」とかつくと、ちょっとビビりな私として触るのが怖いので、やっぱりfunction.php。 以下を記述

remove_filter( 'the_content', 'wptexturize' );

あとはいつも通り、コメントアウト。

PHPの場合は以下でも可。直接コメントアウトしたいところに書く。

<!--?php if(0){?-->
コメントアウト部分。複数行可。
<!--?php } ?-->
wordpress

wordpress.org から wordpress.com にお引越し

 

wordpress.org から wordpress.com にお引越ししました。
サーバーとドメインの更新時期になって、その辺のお金をケチりました。
元々自分のメモ用と実験場所に。と開設したものの、結局都度調べたり、昔の制作物のソースを見に行ったりしちゃって、全くtipsの蓄積にならなかったもので・・・・

wordpress.org とwordpress.comの違いをメモ。

■wordpress.org→オープンソース。ここではWPが無料配布されていて、ZIPでDLできる、おなじみのところです。
自分のサーバーにファイルを突っ込んで使用するので、好き放題に弄れます。(themaの著作権とかを侵害しない限り。)
PHPmyadminプラグインをインストールすればDBもいじれます。

■wordpress.com→企業が運営している無料レンタルブログ。無料の場合、ドメインはwordpredd.comのサブドメになる。ただし有料で独自ドメインを選ぶことも可。
「レンタルブログ」なので触れる範囲はかなり限られる。インストールできるテーマも結構限られる。CSSも弄れない。プラグインも入れれない。(はず。方法あったら教えてください。)→PHPは使えない。
※ただし、各種有料プランがあり、それによって、CSSなどはいじれるようになるっぽい。

今回は節約が目的なので、勿論有料プランは使用せず・・・・。
メモにはできても、実験場にはできなくなりました・・・。
「テーマの編集」とプラグインは無料でも利用できるようにして頂けると大変ありがたいんだけども・・・無料では無理か・・・・?

wordpress.comの有料版でカスタムデザインとかできるのが年間30ドル。

pro版とかってのが年間(←「1年間のアップグレード」ってあるから多分年額。)99ドル。

高い・・・
年間99ドル払うんだったら、普通にさくらのスタンダードプランとかのがお得で、しかも好きに弄れるんじゃないかと思うと、このpro版とやらを利用するメリットが何なのか全くわからない。
(サーバ借りたりドメイン取ったりするのが面倒とかって人の為なのかしら?
詳しくない人の為・・・ってもいまどき調べればすぐに方法わかるしね。キャプチャ付きで丁寧に説明してくれてるサイトやブログなんかがたくさんあるんだし。
まぁ、タダで使わせてもらっておいてあんまり文句いうものではないとは思うけど、ちょっと高くないか?)

やっぱりサーバ更新すればよかったな・・・とちょっと後悔してますが、まぁしばらく使ってみます。
無料でもテーマ編集とプラグインが使えるようになることを夢見つつ・・・

追記:Gアナリティクスも入れられず・・・。
昔、wordpress.orgのほうでは、ウィジェットにトラッキングコード書いて解析できてたんですが・・・(「テーマの編集」からheader.phpとかfooter.phpをいじれるってのを知らなかったときに、サーバにつなぐのがメンドい・・・とかいう怠惰な理由からウィジェットに突っ込んでみたら成功した。)
なんかこちらでは、勝手に整形されてscriptタグが消えて、フロントにそのままコードが出ちゃいます・・・。
プラグインも入れられないから解析系のプラグインも使えないし・・・。
何か方法はないものかしら・・・