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

グーテンベルクに挑戦

 

グーテンベルクと言えば、WP利用者の中で賛否両論な新エディタで、私も使いにくそうと敬遠していたんだけども。
ブロックエディタがとても良いと人に勧められたので、クラシックエディタのプラグインを停止してみた。
つまり、これはブロックエディタで書いてます。
なんか今後カスタムフィールドがブロックエディタに置き換わっていくみたいなことを言われたので。(真偽は不明)
初見の感想。やっぱり分かりにくい。。。。
WP2.6から10年以上、テキストエディタ使ってきた身としては、やはりこのブロックエディタというのはとっつきにくい。そして、このツールバー?が邪魔。

なにより、WPのビジュアルエディタは、勝手に変なタグ入れたり、勝手にタグ消したりとかしてくれて、意図した通りにならないとか、崩れるっていうイメージがあるんだけど。
まぁ2.7の時に受け付けられたイメージなので、流石に10年もたてば改善してるのかな?

とりあえずコード書きたいならコードでも書けるらしいのでちょっとコード書いてみるテスト
と思ったら早速「コード」と「カスタムHTML」の違いにちょっと戸惑う。
コードは<pre>かな?と予測テスト↓

<img width="610" height="190" src="https://wp-etc.navich.net/wp-content/uploads/2013/04/tool.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://wp-etc.navich.net/wp-content/uploads/2013/04/tool.png 610w, https://wp-etc.navich.net/wp-content/uploads/2013/04/tool-300x93.png 300w" sizes="(max-width: 610px) 100vw, 610px">

↑正解だったぽいので、カスタムHTMLもやってみる。↓

うむ・・・。意外と使える。。。?
CSSとか使いたいときは普通にカスタムHTMLを使えば良いだけか。
ブログレベルなら問題なさそう。がっちりデザイン組み込んだサイトとかだとどうなのかなー。

グーテンベルクってGutenbergだけど「ク」なのね?「グーテンベルグ」じゃなく?
活版印刷並みの革命って自称なんだから、それなりの自信もあるんだろうし、もうちょっと調べてみる。

Advanced Custom Fields(アドバンスドカスタムフィールド)でテキストとタクソノミーの出力とショートコード化

 

アドバンスドカスタムフィールドの出力。
テキスト

<?php if(get_field('フィールド名')): ?>
<p>フィールドラベル:<?php the_field('フィールド名'); ?></p>
<?php endif; ?>

例えば
フィールドラベル⇒商品名
フィールド名⇒product_name の場合

<?php if(get_field('product_name')): ?>
<p>商品名:<?php the_field('product_name'); ?></p>
<?php endif; ?>

タクソノミーの場合。配列なので、foreach。

<?php if(get_field('フィールド名')): ?>
<?php $term = get_field('フィールド名'); ?>
<p>フィールドラベル:<?php
foreach((array)$term as $value) { ?>
<a href="<?php echo get_bloginfo('url') . '/フィールド名/' . $value->slug; ?>"><?php echo $value->name; ?></a>
<?php if(next($term)!==FALSE){ echo ", ";} ?>
<?php } ?>
</p>
<?php endif; ?>

例えば同じく
フィールドラベル⇒商品名
フィールド名⇒product_name の場合

<?php if(get_field('product_name')): ?>
<?php $term = get_field('product_name'); ?>
<p>商品名:<?php
foreach((array)$term as $value) { ?>
<a href="<?php echo get_bloginfo('url') . '/product_name/' . $value->slug; ?>"><?php echo $value->name; ?></a>
<?php if(next($term)!==FALSE){ echo ", ";} ?>
<?php } ?>
</p>
<?php endif; ?>

例えばフィールドラベル⇒国
フィールド名⇒country の場合

これをショートコード化してみる。
テキストの場合

<?php
function tx_parts() {
if(get_field('フィールド名')):
$html .= '<p>フィールド名:' . get_field('フィールド名') . '</p>';
endif;
</code>
<code>
<?php
function tx_parts() {
if(get_field('country')):
$html .= '<p>国:' . get_field('country') . '</p>';
endif;

タクソノミーの場合。

<?php
function tx_parts() {
if(get_field('フィールド名')):
$term = get_field('フィールド名');
$html = '<p>フィールドラベル:';
foreach((array)$term as $value) {
$html .= '<a href="' . get_bloginfo('url') . '/フィールド名/' . $value->slug . '">' . $value->name . '</a>';
if(next($term)!==FALSE){ $html .= ", ";
}
endif;
return $html;
}
add_shortcode('tx', 'tx_parts');

例えばフィールドラベル⇒ブランド
フィールド名⇒brand の場合

?php
function tx_parts() {
if(get_field('brand')):
$term = get_field('brand');
$html = '<p>ブランド:';
foreach((array)$term as $value) {
$html .= '<a href="' . get_bloginfo('url') . '/brand/' . $value->slug . '">' . $value->name . '</a>';
if(next($term)!==FALSE){ $html .= ", ";
}
endif;
return $html;
}
add_shortcode('tx', 'tx_parts');

繋げて複数タクソノミーの出力を一つのショートコードで行う場合。

<?php
function tx_parts() { /*テキストタイプ*/
if(get_field('product_name')):
$html .= '<p>商品名:' . get_field('product_name') . '</p>';
endif;

if(get_field('brand')): /*タクソノミータイプ*/
$term = get_field('brand');
$html .= '<p>ブランド:';
foreach((array)$term as $value) {
$html .= '<a href="' . get_bloginfo('url') . '/brand/' . $value->slug . '">' . $value->name . '</a>';
if(next($term)!==FALSE) $html .= ", ";
}
endif;

if(get_field('country')): /*タクソノミータイプ*/
$term = get_field('country');
$html .= '<p>国:';
foreach((array)$term as $value) {
$html .= '<a href="' . get_bloginfo('url') . '/country/' . $value->slug . '">' . $value->name . '</a>';
if(next($term)!==FALSE) $html .= ", ";
}
endif;

return $html;
}
add_shortcode('tx', 'tx_parts');

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('呼び出し用名前', '関数名');

こんな感じです。

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

【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がアップデートされたらしいので、他にも古いプラグインには影響があるかも?
今回みたいにアップデート自体がされなくなっちゃうと、なかなか気づかないので気を付けられたし。

 

【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にパラメータをつける方法に思考チェンジして、↑のように。

背景をフルサイズの動画にする 【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 追記】
素敵な動画素材を探す暇もなかったので、プラグイン停止しました。

 

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.com から wordpress.orgへお引越し

 

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

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

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

因みに元サイトは
http://memotool.wordpress.com/

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

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だけど、もうちょっとわかりやすいところにあっても良いかとおもうんだけど・・・。