カテゴリー別アーカイブ: WPプラグイン

カスタムフィールドでビジュアルエディタとテキストエディタを使う

 

カスタムフィールドを使うのに超便利な「Advanced Custom Fields」ですが、普通のcontent入力エリアのように「ビジュアル」と「テキスト」を切り替えるフィールドタイプはさすがにない・・・

と思ってたらアドオンいれればできちゃうじゃないですか!さすが!!

もちろんAdvanced Custom Fieldsが有効になってることが前提です。

手順1:アドオンのダウンロード

https://github.com/elliotcondon/acf-wordpress-wysiwyg-field

へアクセスしてZIPでダウンロードして展開。

手順2:フォルダ名を変更

フォルダ名を「acf-wp-wysiwyg」に変更します。

手順3:フォルダをアップロード

フォルダをまるごとプラグインの階層(wp-content⇒plugins)へアップロード。

手順4:ワードプレス管理画面へ

「プラグイン」を開くと、新しくAdvanced Custom Fields: WP WYSIWYGてのが追加されているので「有効化」。

手順5:使ってみる。

Advanced Custom Fieldsの設定画面で「Wysiwyg Editor (WordPress)」を選ぶ

2014-09-11_204739

▼でた~~

2014-09-11_204903

 

taxonomy.phpで記事が表示されない!

症状

カスタム投稿タイプ・カスタム分類(タクソノミー)を作り、カテゴリー一覧のようにアーカイブ表示させたいときに使うテンプレートが【taxonomy.php】です。

通常の使い方としては、「taxonomy.php」または「taxnomy-[タクソノミー名].php」とかのファイルを作成し、
以下のような基本的なループを書くと一覧が表示されます。

<?php if(have_posts()): while (have_posts()):the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>

 

でも出なかったんです・・・

無理やりquery_postで指定すれば出たんですが、標準の方法ででないってことは何かがおかしいってことなので調べました~

プラグインの設定間違ってた

さんざん調べて分かった答えが、プラグイン「Custom Post Type UI」の設定でした。

単純な自分のミス!ですが意外と気づかない・・・

Custom Post Type UI の設定

Custom Post Type UIはカスタム投稿タイプやカスタム分類を簡単に作成・管理できるプラグインで、お気に入りです。

カスタム投稿のオプション「Exclude From Search 」を「True」にしてしまっていたのが今回の原因でした。
False」に直したらちゃんと表示されました~。

デフォルトは「False」なので、自分でなぜか「True」にしちゃってたんですね・・・

 2014-08-01_030025

設定の確認・変更はプラグインのカスタム投稿の設定画面「Manage Post Types」を開き編集画面へ。
「Advanced Options」を開くとありますよー

 

 

contactform7で確認画面実装手順メモ

毎回使うので、メモしとく。

①ライブラリのダウンロード

aulta様様のサイトより、jsとcssをダウンロードします。
http://aulta.jp/library/wordpress/contactForm7Confirm.html

②jsファイルの編集

contact-form7-confirm.jsを編集します。
編集方法は上記サイトに詳しく乗っていますが、こんな感じ↓

	var option = {
		pages : [
			{
				'path' : ['/contact/','/contact'],//ファイル名を入れる(複数の場合⇒ ['/inquiry/', '/inquiry2/', '/inquiry3/'])
				'button' : {
					'areaClassName' : 'btns',	//	<p class="btns">[submit "送信"]</p>
					'confirm' : '<input class="button-confirm" type="button" value="確認画面へ" />',	//	html
					'rewrite' : '<input class="button-rewrite" type="button" value="戻って編集" />'	//	html
				}
			}
		],

●【path】はコンタクトフォームを使用するページのファイル名。スラッシュの有り・無しにも注意。
とりあえず両方入れとく。

●【areaClassName】は送信ボタンを囲む要素のクラス名を指定。
contactform7の設定画面で↓のようにクラス名つけた要素で囲んでおくこと!

③contactform7でsubmitを囲む要素に②で設定したClass名をつける。

<p class="btns">[submit "送信"]</p>

④CSSの編集

contact-form7-confirm.cssでデザインの編集。

⑤jsとcssをリンク&アップロード。

head内でcssとjsをリンクして、アップロードすればOK!

とっても簡単ステキ!

 

 上手く行かないときは

●ヘッダとフッタにアレを読み込まないと変になるかも。

▼アレ

//</head>の前に
<?php wp_head(); ?>


//</body>の前に
<?php wp_footer(); ?>

 

●リンクちゃんとできてる?

●パスとクラス名合ってる?

 

 

郵便番号から住所自動入力Ajax(contactform7)

問い合わせフォームで郵便番号を入力すると自動で住所が途中まで出てくるようにします。

実装方法はとってもとっても簡単。数行のコードで実装できます。
実装方法は以下のサイトを参照。
https://code.google.com/p/ajaxzip3/

contactform7で住所自動入力を実装したい

WordPressの問い合わせフォームといえばcontactform7。
contactform7で郵便番号を入れたら住所が自動で出てくるカタチにしたいときも
上記ajaxzip3が役立ちます。

contactform7の設定でinputに「onKeyup」とか「onClick」を付けられればいいのだけど、
めんどくさそうだったのでjQueryで対応。

①郵便番号を入力するinputにclassかIDを付けておきます。

▼contactform7側で作成したタグ。

[text zip id:zipcode]

②住所を出力するinputのnameを確認。

▼contactform7で作成したタグ。nameは「address01」になります。

[text address01]

③Ajaxzip3を読み込み&jQueryでキーアップイベントを書く

▼headでもbodyでも好きなところ(jQuery本体より後)でAjaxzip3を読み込む。
その後jQueryでkeyup(キーボードのキーが押され、上がった時)に住所を出力するコードを記述。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script>
$(function(){

	$('input#zipcode').on('keyup',function(){
	AjaxZip3.zip2addr(this,'','address01','address01');
	});

});
</script>

住所を都道府県とそれ以降に分けたい場合は出力用テキストボックスを2つ用意して、

	AjaxZip3.zip2addr(this,'','address01','address02');

↑こんな風に。

とっても簡単。

 

wordbookerからSocial Networks Auto Posterに乗り換えてはまった罠

FB投稿(リンクシェア)が一般に公開されない!

wordbookerが設定も簡単で重宝していたのですが、今月あたりから使えなくなり、サポートも終了とのことで乗り換えプラグインを探すことに。

いろいろ調べて「Social Networks Auto Poster」が便利そう!で入れてみました。

wordbookerではAppを作る必要がなかったのですが、
Social Networks Auto PosterではFB Appを作成しAppIDとPWが必要になります。
そこが面倒だったのですが、設定もわかりやすく、無事WP投稿がFBのタイムラインに反映されてよかったよかった。

と、安心してたら問題が。。。

FB投稿(リンクシェア)が一般に公開されない!

FB管理者で入って確認するとちゃんと反映されてるし一般公開になってるのに
ログアウトしてFBページを見てみると反映されていない。。

原因はプラグインじゃなくてFB APP

Appについて無知だったことが一番の原因なんですが・・・

▼赤枠の部分がじゃなくてになっていたら要注意。
マウスを当てると「not available to all users because your app is not live」になります。
つまり、「アプリが生きていないため、すべてのユーザーが利用できない」ってこと。

fbapp

こりゃいかん。

解決策

①まずSetting(設定)画面でメールアドレスを入力し、変更を保存。

fbapp2

②次にStatus&Reviewを開き、「公開しますか?」的な英文の横のボタンをクリックしYesに。

fbapp3

なんかウィンドウがでてきたら「承認」をクリック。

▲さっきだった部分がになります。

 

これで完了。

今まで公開されていなかった投稿も全部一般にも公開されました!

 

 

 

 

 

TinyMCE Advancedを最新版にしたら・・・

文字カラーとかを自由に設定できる「その他の色」カラーピッカーがなくなってしまった!!

▼バージョンアップ前にあった「その他の色」。クリックするとカラーピッカーが出てくる。

2014-06-11_045233

▼TinyMCE Advanced 4.0に更新したら「その他の色」がない!

2014-06-11_045452

http://www.laptoptips.ca/projects/tinymce-advanced/より

 The “More Colors” dialog is missing

This is a change in TinyMCE 4.0. By default is includes only pre-defined colors. If you prefer to select custom colors, try the TinyMCE Color Picker plugin.

・・・TinyMCE Color Pickerっていうプラグインを使えと。

▼入れてみた。

2014-06-11_050009

▼「Add a color」をクリックするとカラーピッカーが出て

2014-06-11_050043

▼「Apply」をクリックすると

2014-06-11_050115

▲ここに登録されるみたい。新規投稿のときもこの色は残ってて便利かも。

この最新バージョン、他にも使えなくなってしまった機能がいろいろあるらしい。。
テーブルのセルの背景色とか。

そんなときはめんどいけど前のバージョンをインストールしなおしたほうが早いかも~

▼ここから好きなバージョンをげっとできます。

http://wordpress.org/plugins/tinymce-advanced/download/

 

 

contactform7で404エラーになるバグ(?)の解決方法

WordPress3.6のContactform7(バージョン 3.5.2)で変なバグがあるとのことで修正依頼 。

いろいろ調べてみたら原因が分かったっぽいので残しておく。

症状

・名前(必須)
・アドレス(必須)
・メッセージ(必須)

↑のようなフォームで、「必須項目に記入もれがあります。」のエラーを一回だした後、
そのままアドレスとメッセージを入力し「名前」を空欄で送信ボタンを押すと404エラー

ちゃんと検証してないんですがざっくりこんな症状。

 

原因と解決方法

名前のname属性の値が「name」になってたのが原因っぽい。
WP側で使ってるnameとぶつかったくさい。

「yourname」とかに変更して解決。

変更方法はcontact form7の管理画面で変更するだけ。

 2014-06-01_005036

▲ここがnameだとまずいので、▼your-nameとかに変更。
デフォルトはちゃんとyour-nameになってる。

2014-06-01_005128

▼自動送信メールのところもちゃんと変更しておく。

2014-06-01_005255

 

とりあえずこれで解決。

 

 

 

カスタムフィールドのプラグインはコレ

Advanced Custom Fields

カスタムフィールドを扱うときに便利で気に入っているのが
Advanced Custom Fields

いろいろ使ったけど結局これが一番お気に入り。

使い方はググると出てくるし、説明がいらないほど使いやすいUIで誰でも簡単にできると思うので、お気に入りポイントだけ紹介。 

お気に入りポイント

ルールの設定がとても簡単。

カスタムフィールドを使いたい投稿タイプやカテゴリーを選ぶことができる。とても簡単。もちろんカスタム投稿タイプも選べる。

2014-05-02_020224

消したいときはマウスオンでマイナスが出る。気づかなくて探した。

②表示位置が選べる

投稿画面でカスタムフィールドの入力ブロックをどこに表示するか選べる。これはうれしい。
タイトルの下に設定しておくと入力忘れがなくて安心。

2014-05-02_024120

さらに「画面に表示しない」でチェックを入れると投稿画面で邪魔なものを非表示にできる。
コンテンツエディタがいらない場合とか結構あるけどチェックひとつでそれができる。

いろいろあるとクライアントが迷うし。便利すぎ。

 

③フィールドの設定が至れり尽くせり

フィールドを追加

カスタムフィールドを追加するのも、超かんたん説明不要。
で、やりたいこと全部設定できちゃう

2014-05-02_025917

ただのテキストボックスでもこんなにかゆいところに手が届く。

「フィールド記入のヒント」とかに説明入れとくと更新者に親切だし、「デフォルト値」にはよく使うやつとか例文とか入れられるし、「prepend」とか「append」とかに入力エリアの前後に出したい文字設定できるし(入力画面のみ。出力は別)やりたいことだいたい揃ってる。

他のフィールドタイプも同様に素晴らしいのでいろいろ見てみてください。

④googleMapが使える

今まで別のgoogleMapプラグインを使っていたけど、これでいいじゃんと思った。。

2014-05-02_031122

▼実際の入力画面。住所とか入力すると地図でます。

2014-05-02_031210

他にもjQueryのDatePickerとか便利なフィールドがたくさん。

⑤タブが便利!

2014-05-02_031354

ただタブを出すだけなんだけど、これがとても素敵。

フィールドが多くなると投稿画面が長くなってしまうけど、タブを使えばとてもスッキリ!!

2014-05-02_031426

⑥並び替えもドラッグアンドドロップで簡単

2014-05-02_032247

すばらしい。

まとめ

●制作者がやりたいことのほとんどが簡単にできる。
●クライアント・更新者にわかりやすいフィールド入力UIを実装できる。
●使ってて感動する(いろいろ使ってきたから余計に・・・)

そのうち出力編を・・・

とりあえず最初に入れておくWPプラグイン

WP Syntax Highlighter

コード書くから。

SyntaxHighlighter TinyMCE Button

上記SyntaxHighlighterが使いやすくなる。
ビジュアルエディタに入力用アイコンが出て、簡単にコードを挿入できるように。

Advanced Custom Fields

カスタムフィールドの管理が超便利。
カスタムフィールドのプラグインはコレ!

Custom Post Type UI

カスタム投稿とタクソノミの管理がしやすい

Custom Post Type Permalinks

カスタム投稿使うときのパーマリンク設定に必須

TinyMCE Advanced

ビジュアルエディタのボタンを好きに設定できる。

Admin Menu Editor

管理画面のメニューの並びを変えたり隠したり。自分用にもクライアント用にも。直感的に操作できるのが魅力。