固定ページPageと投稿Postを変換できるプラグインPost Type Switcher

WordPressでブログを書いていると、時経つうちに構成を変えたくなる時があります。先日、幾つか投稿としてアップしたものを一つのジャンルにまとめて固定ページで表示させたほうが見やすくていいんじゃないかという考えにいたり、投稿記事から固定ページに変換する方法を探してみました。

 

日本語で探すとほとんどがpTypeConverterというプラグインについての情報だったので、さっそくインストール。pTypeConverterのメリットは、記事タイトルが一覧表示されて、その中から固定ページに切り替えたいものを選択して一括変換できるというところ。固定ページから投稿への変換も可能です。

 

が、・・・

 

いくら待っても何をしても一覧表示がされず。。

 

何かのプラグインとバッティングしているのか、Wordpressのバージョンとの互換性がないのか、原因はよく分かりませんが残念ながらpTypeConverterは使えないよ、ということで別のプラグインを探してみました。

 

探してみれば色々あるもので、その中で気に入ったのがPost Type Switcherというプラグイン。

pTypeConverterとは違い、投稿や固定ページの編集画面で投稿タイプを切り替えることができます

 

投稿タイプを変換する記事がたくさんある場合はpTypeConverterのように一覧表示から選んで一括変換できるとありがたいですが、基本的にそんなにしょっちゅうあるものでもないし、変換したいとしてもせいぜい10記事程度くらいまでかと思うので、私はPost Type Switcherの機能で十分、使いやすいと思いました。

以下、簡単なインストール手順と使い方です。

[ad#big-banner]

 

Post Type Switcherのインストール

post type swtcher

 

WordPressダッシュボードのプラグイン>新規追加 でPost Type Switcherと入力・検索し、該当するプラグインをインストール・有効化します。

あるいは以下のリンクからプラグインファイルをダウンロードし、ダッシュボードのプラグイン新規追加からアップロードします。

→ Post Type Switcherのダウンロード

 

Post Type Switcherの使い方

インストールと有効化が完了したら、投稿タイプの変更をしたい記事(ポスト)や固定ページの編集画面を開きます。

右上にある「公開」エリアにPost Typeという欄が表示されているので、「編集」をクリックします。

post type swtcher

 

表示されたドロップダウンの中から切り替えたい投稿タイプを選んでOKをクリックします。あとは更新ボタンを押すだけ^^

post type swtcher 2

説明するまでもないくらい簡単ですね^^; 投稿タイプの変換ができるPost Type Switcherのご紹介でした。

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

最近、地元のマタニティウェアショップから依頼されたサイト制作で初めてアイコンフォントというものを使ってみたのですが、なかなか使い勝手が良かったので、今後の覚書ということでまとめてみました。

アイコンフォント(シンボルフォントとか言い方は幾つかあるよう)とは、Webサイトなどでよく使われるアイコンのセットをフォントとして使えるようにしたもののことです。

画像アイコンとは違ってベクター形式なので画面の解像度によらずきれいに表示されることや、cssで色、サイズなどを調整できるメリットがあります。

 

今回アイコンフォントを探してみて、商用利用も自由な無料のものでもかなり充実した内容のものがあるな~という感じでした。アイコンって探し始めると本当にあっという間に時間が過ぎて行ってしまいますが、今後はアイコンを探す手間も減るんじゃないかなと期待^^

ちなみに、Wordpressブログでアイコンフォントを使いたい場合も、ちょっとした設定だけで利用できるようになりますので、ぜひこの記事を参考に使ってみてください。記事の後半では、アイコンフォントをサイトで利用するときに便利なWebサービスも二つ、使い方も併せて紹介していきます!

 

初めての利用におススメなアイコンフォントFontAwesome

公式サイトhttp://fontawesome.io/

商用利用にもライセンス表記なしで自由に使える無料のアイコンフォントです(ライセンスの詳細はこちらを確認)。479個(記事執筆時)のシンプルで使いやすいアイコンが揃っていて、取りあえずこれがあれば事は足りるという感じの定番アイコンフォント。以下、使い方の手順です。

 

フォントを利用するHTMLで読み込む

まずはFontAwesomeのフォントを、自分のプロジェクト(サイト)のHTMLで読み込めるように設定していきます。方法は二つあって、フォントファイルをダウンロードせずに本家サイト(BootstrapCDN)から読み込む方法と、フォントファイルをダウンロードして自分のプロジェクト内に設置する方法があります。好きなほうを利用してください。

 

方法1.ダウンロードしないでBootstrapCDNからCSSを読み込む

以下のコードをHTMLファイルのheader内にコピペするだけでOK。

参考http://fontawesome.io/get-started/

 

方法2.フォントファイルをダウンロードして利用する

公式サイトにアクセスします。ダウンロードボタンが分かりやすい位置に表示されているのでクリックしてダウンロードを開始。

Font Awesome サイト

 

ダウンロードしたzipファイルを解凍。以下のような構成になっています。

downloaed font

cssフォルダ内のいずれかのファイル(推奨:font-awesome.min.css)とfontフォルダ内の全てファイルを自分のサイトのcssフォルダとfontフォルダにそれぞれコピーします。

注:cssとfontフォルダは同じ階層にあるようにしてください。

 

フォントを利用するHTMLを開き、header内で以下のようにコピーしたcssファイルを読み込みます。

※href=””内は自分のサイトの構成に合わせて適宜変更

 

ここまででフォントの読み込み設定が完了です。では実際にサイト内にアイコンを配置しましょう。

 

サイトにアイコンを配置

公式サイトにアイコンの一覧があるので以下よりアクセスします。

http://fortawesome.github.io/Font-Awesome/icons/

icons in FontAwesome

 

ずら~~っと並んでいますね^^; 使いたいアイコンが見つかったらクリックします。

select icon

すると、選択したアイコンのタグが表示されますのでコピーします。

copy code

HTML内に貼り付けます。

htmlに貼り付け

こんな感じにボタンに使ってみました。

fontawesome適用結果

 

アイコンのスタイルを変更するのに既に用意されたcssクラスも併せてチェックしておくと役立ちそうですね。

http://fontawesome.io/examples/

 

 

WordPressでFont Awesomeを使う設定

WordPressに何かの機能を追加するとなると、ついついプラグインを使う方向に頭が向いてしまいますが、今回はプラグインは使いわない方法でやってみました。

(実は、使おうとしたんですが、どれもうまく動作しなかったんです・・・。Worpress本体のバージョンとの互換性が微妙だったよう)

 

プラグインを使わずにFont Awesomeを導入する方法はいくつかあるようですが、私はfunction.phpに以下のコードを追加する方法にしてみました。

参考Add Font Awesome Icons To WordPress

 

ダッシュボードで外観>テーマ編集の画面に行き、function.phpを開き、以下のコードを追加してください。

※4.2.0の部分は公式サイトに表示されている最新バージョンに合わせると、最新のアイコンが使えます。

function.phpを保存したら、あとは、投稿画面のテキストモードで、必要な場所にiタグを設置すればOK。

例) <i class=”fa fa-angellist”></i> ⇒ 

 

簡単ですね

iタグに記述する各アイコンのクラス名は前述のようにサイトで確認してください。

 

このブログでは記事タイトルの先頭にあるマークを画像からアイコンフォントに変更しました。

Before: スマホなど画面幅の狭い画面で見た場合にタイトルが縦長になってしまっていました。

wp2

wp3

 

After:幅が狭くなっても改行が少なく見やすくなったかなと思います。色の変更とかもCSSだけで調整できるのもいいです。

wp4

wp5

 

March.15.2015追記:ブログデザインのカスタマイズに伴って上記のような記事タイトルの先頭のマークは消えました。代わりにFontAwesomeを使ってShareボタンやFollowボタンを表示させたり、グローバルメニューにもアイコンを表示させています。

 

さてここまではFont Awesomeというアイコンフォントのみの利用方法でしたが、それ以外にもフリーで使えるアイコンフォントは幾つも存在します。

そんなアイコンフォントのなかから好きなもの利用したいという場合に役立つサービスを二つご紹介します。

 

複数のアイコンフォントを簡単な設定で使えるWebサービスWE LOVE ICON FONTS

FontAwesomeを含め、幾つかのアイコンフォント(すべて無料かつオープンソース)を使いたいという時に便利そうなWebサービスを見つけました。ファイルのダウンロード不要でさくっと設定して使えます。

サイトにアクセスhttp://weloveiconfonts.com/

we love icon fonts

 

表示されているフォントの中から使いたいものをAddをクリックして追加します。

フォントを追加

 

ページの下のほうにスクロールすると、Use selected font(s)というセクションがありますので、そこに表示された内容をコピーして、自分のサイトのcss内に貼り付ければ、フォントの読み込み設定が完了です。

例)typiconsとzocialという二つのフォントを選んだ場合

we love icon fonts 使い方

 

次に使いたいアイコンをサイト内で選んでクリックし、ページ下に現れるアイコンのクラス名をコピーし以下のようにspanタグで設定すればOKです。

we love icon fonts 使い方

例)Zocialフォントのdribbbleを選ぶ場合 <span class=”zocial-dribbble”></span>

 

 

使いたいアイコンだけを選んで一つのフォントファイルにしてくれるサービスFontello

前述のサービスとは違って、cssやアイコンファイルをダウンロードして使うタイプのサービスですが、かなり使えそうです。幾つものアイコンフォントの中から、自分が使いたいアイコン(フォントではなく)だけを選ぶことができ、しかも選んだアイコンだけを新たなフォントとしてまとめなおしてくれるんです

数あるアイコンの中でも実際に一つのサイト内で使うものは限られていますし、ファイルサイズを最小限に抑えながら自分の好きなアイコンをセットにできるのはありがたいですね。

 

サイトにアクセスhttp://fontello.com/

一覧の中から使いたいアイコンをクリックして選んできます。 fontello

 

アイコンを選んだらページ右上のDownload Webfontをクリックしてファイルをダウンロードしましょう。

※ボタンのカッコ内は選んだアイコンの数です。

download webfont

ファイルを解凍すると以下のような構成になっています。

fontello ファイル

  • cssフォルダ : cssファイルがあります。
  • fontフォルダ : fontファイルがあります。
  • config.json : このファイルをfontelloサイト内でImport(レンチボタン内の機能)して作業を継続できます。
  • demo.html : ダウンロードしたアイコンとそのクラス名を確認できます。
  • README.txt : 使い方と注意事項。
  • LICENSE.txt : アイコンのライセンスを確認しておきましょう。

 

 

使い方は、css、fontフォルダを自分のプロジェクト内に追加し、cssフォルダ内のファイルをHTML内で読み込みます。

基本的には以下の二つのcssファイルを読み込めばOKです。

 

その他のcssファイルは必要に応じて利用してください(README.txtを参照)

 

アイコンはiタグのクラスにアイコン名を設定して利用します。自分が選んだアイコンの一覧とクラス名はdemo.htmlを見ると確認できますよ。

例) <i class=”icon-home-outline”></i>

fontello4

無料HTMLテンプレート8選-最近流行りのお洒落なデザインを集めました

最近、自分のサイドビジネス用にひとつWebサイトを立ち上げようと思い、色々なテンプレートを探してたのですが、無料でも今どきのフラット系デザインとか、なかなかお洒落なHTMLテンプレートが見つかったので、備忘録も含めてこの記事で皆さんとシェアしたいと思います。

Treviso

Treviso Responsive HTML5 Template

最近人気のタイプのHTML5テンプレート。下の全体像を見ていただくとわかりますが、すべての情報が1ページに長~く記述されていて、ページ最上部のメニューをクリックすると、その内容の位置までスクロールダウンされ、あたかもページ移動したかのようになります。(このテンプレートでは少し下にスクロールすると最上部にメニューが表示されます)。

Treviso Responsive HTML5 Template

別ページに遷移するよりも表示がスムーズなので格好いいですし、閲覧者側としては下にどんどんスクロールするだけですべての情報が見れるのも魅力ですね。ただ情報が多くなる場合はページを分けるタイプのほうがいいかなという気がします。

ダウンロードはコチラ

デモはコチラ

 

 

Juntos

こちらも1ページにすべての情報が収まっているタイプのHTML5テンプレート。チャリティー関連の組織向けに作られたテンプレートで「寄付」ボタンもついています。もちろん他のジャンルにもカスタマイズ可能。レスポンシブ対応、コンタクトフォームがちゃんと機能するPHPファイルもありという非常にありがたいテンプレートです。ドキュメンテーションもしっかりしています。

Juntos - Charity Association Template

 

ダウンロードはコチラ

デモはコチラ

 

NOVA

NOVA 無料HTML5テンプレート

こちらもHTML5で作られていますが、ページ遷移するタイプのテンプレートです。様々なジャンルに応用できそうなシンプルなデザイン。ブログ形式やポートフォリオ、ギャラリーのページなど使いやすい形のページが揃っています。コンタクトフォームもちゃんと動くのでコーディングに自信がない人も安心して使えますね^^

NOVA 無料テンプレート

ダウンロードはコチラ

デモはコチラ

 

Infusion

レスポンシブ対応のHTMLテンプレート。お洒落なエフェクトがあちらこちらに使われていて、クオリティの高さを感じます。残念ながらこちらはトップページのみのテンプレートですので、メニューをクリックしても別のページは表示されません。残りのページは自分で作成する必要があります。

Infusion 無料HTMLテンプレート

ダウンロードはコチラ(要登録)

デモはコチラ

 

 

Starnight App

こちらもHTML5+CSS3で作られた人気の一枚型テンプレート。右上のボタンをクリックするとメニューが現れ、メニューを選択するとそのコンテンツの位置までスクロールします。スクロールの仕方がふわ~っとしていい感じです笑

Starnight - 無料 HTML5 CSS3 テンプレート

ダウンロードはコチラ(要登録)

デモはコチラ

 

Picku

ギャラリーやポートフォリオサイトに使えそうなお洒落で個性的なテンプレート。ページを全画面に拡大するボタンなど、普通のテンプレートにはなかなかついていない機能があります。画像の「Open」の文字をクリックしたときの動きにも注目です。こちらもテンプレートになっているのはトップページのみなので他のページが必要な場合は自分で作成する必要があります。

Picku 無料HTMLテンプレート

ダウンロードはコチラ

デモはコチラ

 

 

Zeences Dark

無料HTMLテンプレート Zeences Design

 

 

中央部分にスライドがあるのと同時に、バックグラウンドもホワホワと変化するのがお洒落です。トップページも色んな要素がたくさん詰まっていますが、各メニューからアクセスできる様々なタイプのページもよく作りこまれたテンプレートになっています。実際このテンプレートをベースにデザインにも手を加えてサイトを作っているところなのですが、ソースコードも綺麗ですし、非常にカスタマイズしやすい。トップページの全体像は以下のような感じです。

無料HTMLテンプレート Zeences Design

 ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use(個人利用のみ無料)です。

 

Obscura

無料HTMLテンプレート Obscura

 

こちらも上とおなじサイトからのHTMLテンプレートになります。WordpressようのテンプレートをHTML対応したもののようで、ブログっぽい雰囲気のサイトをHTMLで作りたい方にお勧めです。レスポンシブ対応というのもうれしいですね。全体像は以下のような感じ。

無料HTMLテンプレート Obscura

ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use(個人利用のみ無料)です。

 

 

Google AnalyticsとAdsenseのリンク(統合)ができないときの解決法

この記事ではGoogle AnalyticsでGoogle Adsenseのレポートを見るためにリンク付けをしたいのにうまくいかなかった状況とそれを解決した方法について簡単にまとめます。もし同じような状況でお困りであれば何かのヒントになれば嬉しいです。

Googleアナリティクスでアドセンスとのリンクができなかった理由

基本的にGoogleのアカウントが一つであれば、こんな状況は起きないと思うのですが、Googleアカウントを2つ以上持っている場合、私と同じような現象が起きる人もいるかもしれません。

私の場合、Googleアナリティクスは2つのGoogleアカウントから閲覧できるようになっていたんですが、そうなった状況はこんな感じです。

最初にアナリティクスを使っていたGoogleアカウント(「アカウントA」とする)がメインでなくなった

別のGoogleアカウント(「アカウントB」とする)でアナリティクスを閲覧するようになっていた

アナリティクスには最初に使っていたほうの「アカウントA」の情報も残っており、「アカウントA」のほうが「メイン」アカウントに設定されていた。

アドセンスは「アカウントB」で全て設定していた。

 

こんなわけで

アナリティクスのメインアカウント⇒A

アドセンスのメインアカウント⇒B

という風にメインアカウントが食い違っていたためにアドセンスとアナリティクスをリンク付けようとしても「リンク」ボタンさえ表示されなかったんです。

 

以下がGoogleアナリティクスのキャプチャをですが、「ユーザー管理」というメニューを見てみると、二つのGoogleアカウントが登録されていますよね。そして、それぞれアクセス許可の範囲が設定できるようになっています。

ここでAdsenseとのリンク付けを行いたい「アカウントB」で「共有設定」が許可されていないと、リンク自体ができないというわけでした。

google analytics複数アカウント

デフォルトでは最初のアカウントにすべてのアクセス許可があって、その後追加されたアカウントには編集・共有設定のアクセス許可が付かないようになっているみたいです。私みたいに複数アカウントをアナリティクス側で使っている場合は、アクセス許可がどうなっているか、一度チェックしてみてください。

 

アナリティクスのアクセス許可を変更しアドセンスとリンクさせる

そんなわけで、上のようにアクセス許可の範囲を設定しなおし、「アカウントB」に共有設定の許可を与えてから、アドセンス側とのリンクに再度挑戦したら、無事にできました。以下、その方法の図解です。

アナリティクス側で「アナリティクス設定」メニューの中から「Adsenseリンク設定」を選択すると、今度は「AdSenseアカウントとアナリティクスアカウントをリンク」というところに青いボタンが表示されますのでクリックします。

analyticsとadsenseをリンク

 

そうすると、一覧にリンクしたいアナリティクスアカウントが表示されますので右側の「リンク」をクリックします。

アドセンス側でブログを選択

 

以下のように表示されたらアドセンス側の設定は完了です。アナリティクスのほうに移ります。

アナリティクスとの統合

 

アナリティクス側で再度「アカウントをリンク」をクリックします。

アナリティクス側の設定

以下の表示が出たら、「1個のビューを選択」をクリックしてリンクするAnalyticsプロファイルを選択します。

アナリティクス側の設定2

 

以下のような表示になればOKです。

アドセンスとのリンク状態

アナリティクスにAdsenseというメニューが表示されるようになりました。まだリンク付けされたばかりなのでレポートの結果は0ですが今後は詳細な分析もできそうです。

analyticsからadsenseのレポートを見る

 

さくらサーバー+複数WordPress=505エラー頻発!がめっきりなくなった件

私はブログ用に「さくらサーバ」のスタンダードプランを利用していますが、最近、Wordpressブログを複数運営するようになってから、どうもサーバーの調子が良くなくて困っていました。

さくらサーバーのスタンダードプランは、低価格でWordpressが複数インストール可能で、一通りの機能がそろっているので、個人利用で始めるには悪くない選択肢だと思っていたのですが、ネットで検索するとあんまりいいイメージを持っている人が少ないような感じ。

特に、

  • WordPressで作ったブログの表示が【遅い】
  • 505エラー(Internal Server Error)が【頻発】する

という話は非常によく見かけます。

 

実際私も使っていて「遅い!」と思ったことは何度もあり、先月、Wordpressで作ったブログを複数所有するようになってからは、さらに505エラーが超多発

  • ブログ記事を公開すると505 Internal Server Error
  • ブログ記事を更新すると505 Internal Server Error
  • ブログ記事を編集しようとすると505 Internal Server Error

 

毎回毎回イラっとくるあの白い画面。

自分のイライラ度のボルテージもだいぶ上がってました・・・トホホ

 

ネットで問題を検索して「困っているのは自分だけではなかった」などとホッとしつつも、解決のために色々試しても結局どうにもならず。。

 

ブログの表示が遅いとかWordpressダッシュボードのほうがモッサリ動くとかっていうのは、もうだいぶ前から高速化をするためのプラグインやCDNサービスなども導入して、そこそこのスピードを出せるように頑張ってきたのですが。。

「やっぱり人気のエックスサーバーじゃないと今後は無理かな~」なんていう気持ちもわいてきていました。

ただ、さくらサーバーの年契約も更新したばかりだしエックスサーバーは高性能な分、値段も倍以上になるし、ブログのサーバー移行もまたそれはそれで面倒だし…と二の足を踏んでいたところ。。

 

5/22にさくらインターネットがメンテナンスを実行したんです。

 

メンテナンスの内容はこんな感じでした。

・ディスク容量増量
・OS、各種バージョンアップ
・IPv6アドレス対応
・メールサーバのセキュリティ強化
・メール容量制限の上限拡張

スタンダードプランではディスク容量が30GBからナント100GBまで増量されるという、なかなかなメンテナンス内容で「これは嬉しい」と思いながらも正直、それ以上は何も期待していなかったのですが・・

 

 

 

最近ブログ記事の更新や編集をしていてふと気が付いたんです。

 

 

 

「最近505エラー見てなくない???」

 

 

そうなんですよ!

 

本当にあのガッカリな505 Internal Serverエラー画面をめっきり見かけなくなったんです。

 

前なんて、一つの記事を表示させながら別のブラウザタブで他の記事の更新なんかしようものなら即505エラーだったのに。。

 

最近は複数のブログ記事を次々に編集表示させたり同時に更新ボタンをクリックしたりしても全然平気♪

気が付けばWordpress管理画面(ダッシュボード)の表示も前よりサクサク動くようになっていました。

 

 

さくらサーバーは管理画面も使いやすくて月500円と安価だし、個人でブログを始めるにはお手頃だと思いますが、どうしてもあの505エラーだけは不満でした。 ひとまず、このメンテナンスのおかげでサーバー乗り換え計画は延期されそうです。

 

「さくらサーバーではWordpressを複数所有すると505エラーが頻発しやすい」という評判もなくなりそうですね。

今後は自信をもってさくらのスタンダードプランをおススメできそうです笑

WordPressを導入したい方はスタンダードプラン以上を必ず選んでくださいね。ライトプランはWordpress非対応です。

プラグイン1個で超多機能!ありがたすぎるJetPackで問い合わせフォームを作ってみた

ソーシャルメディア連携やブログパーツのカスタマイズを行うのに色々とありがたい機能を提供してくれるWordpressのプラグインJetPack。FacebookページやGoogle+、Twitterで新しい記事の投稿情報を共有したいと思って使い始めたところ、他にも色々と役立ってくれている機能があります。その一つが、「問い合わせフォーム」の設置。

 

問い合わせフォーム作成のためのWordpressプラグインと言えば、有名なのがContact Form、最近ではTrust Formというのが人気になってきていますよね。

私もそのどっちかを選ぼうと思っていたんですが、すでにインストール済みのJetPackで間に合わせられるなら、それに越したことはない(プラグインは多ければ多いほどWordpressが重くなったり何かと不具合の原因になったりするんで)ということで、とりあえず作ってみました。(⇒そのまま使い続けることにしました^^)

JetPackのコンタクトフォームの特徴

  • 問い合わせの管理がダッシュボードでできる: コンタクトフォームの機能を有効化すると管理画面に追加される「フィードバック」というメニューが現れ、そこで過去の問い合わせを管理できます
  • シンプルで分かりやすい作り: 固定ページの新規追加画面に「お問合せフォームを追加」というボタンが表示されるので、それをクリックしてフォームを作成し、固定ページに埋め込むことができます
  • 問い合わせページがカスタマイズしやすい: 固定ページに埋め込むので、フォームの前後にテキストや画像なども好きなように追加できます
  • Akismetによるスパムチェック: ユーザー側が問い合わせを送信すると、スパムでないことを確認するため Akismet のフィルターがかかり、そのチェックを通過した問い合わせがメールで送られ、フィードバック管理エリアにも保存されます。これはありがたいですね^^

 

JetPackを使った問い合わせフォームの作成手順

まず、JetPackがまだインストールされていない場合は、ダッシュボードからプラグイン>新規追加で「Jetpack by WordPress.com」を検索してインストール、有効化します。プラグインは以下のサイトからもダウンロードできます。

⇒ Jetpack by WordPress.com

JetPackを実際に使うには、Wordpress.comのアカウントと連携する必要がありますので、表示される案内に従ってアカウントとの連携を済ませてください。

連携方法の具体的な手順はこちらのサイトが参考になります⇒ Jetpack by WordPress.comプラグインのインストール

 

連携が完了すると、JetPackに含まれる様々な機能を一覧できます。その中から「コンタクトフォーム」を見つけて「有効化」ボタンをクリックし、有効化します。

JetPack-contactForm

 

固定ページの新規追加を開くと、「お問い合わせフォームを追加」というボタンが表示されるはずなので、それをクリックします。

JetPackコンタクトフォーム追加

 

初期状態では、名前・メールアドレス・ウェブサイト・コメントの4項目が用意されています。もし新たに項目を追加したい場合は以下の画像に示す部分をクリックして新規項目(新規フィールド)を作成してください。

JetPackコンタクトフォーム作成

 

以下はドロップダウン項目を新規追加する場合の一例です↓↓

JetPackコンタクトフォーム 作成

 

問い合わせを送信するメールアドレスやメールの件名を設定したい場合は、「メール通知」のタブから設定します。もし何も設定しなければ固定ページの投稿者のメールアドレスに固定ページ名(「問い合わせ」など)を件名にして送信されます。

JetPackコンタクトフォーム作成

 

「フォームビルダー」タブに戻ります。既存フィールドの編集や並び順の移動をしたい場合は以下のようにフィールドにカーソルを合わせると「移動」「編集」といったメニューが現れます。

JetPack 問い合わせフォーム フィールド削除

 

いらない項目は、項目の右側にあるマイナス(-)をクリックすると削除できます。

全ての設定がおわったら「このフォームを投稿に追加」ボタンをクリックします。

JetPack コンタクトフォーム 埋め込み

 

固定ページに問い合わせフォーム用のタグが埋め込まれますので、前後にテキストや画像などを追加したい場合は、いつもの記事編集と同じ感覚で行えます。フォームは以下のようにシンプルで使いやすい表示になっています。実際の問い合わせページはこちらからご覧ください^^⇒ お問合せ

問い合わせフォーム作成後

 

作成した問い合わせフォームからテスト送信をしてみた

実際に、問い合わせフォームからテスト送信をしてみました。すると、問い合わせフォーム前後のテキストは変わらず、フォームの部分が「メッセージを送信しました」というメッセージと送信内容に切り替わりました。

JetPackによる問い合わせフォーム

 

問い合わせのメールはこんな感じです↓

JetPack-contactForm7

 

ダッシュボードの「フィードバック」メニューから問い合わせの内容を見てみるとこんな感じでした↓↓

JetPack フィードバック

問い合わせの履歴がダッシュボードで管理できるのも嬉しい機能ですね^^

 

 

JetPackではこのほかにも関連記事の表示や、CSS編集を楽にしてくれる機能なども使っているのですが、本当にインストールしておいて損はないプラグインだと思います。また「これは!!」という機能が見つかったら記事にアップしますね^^

WordPressのビジュアルエディタでツールバーが全く表示されなくなったときの対処法

今日、新たに記事を投稿しようと思ってWordpressダッシュボードから新規投稿画面を開いたら、ビジュアルエディタが固まってしまいました。。。

Wordpress ビジュアルエディタ 固まった

こんなことは今までなかったので、内心かなり焦りましたが無事解決したのでその一部始終をお届けしようと思います。問題の原因や解決方法は色んなパターンがあるみたいなので、以下に書く方法も試してみてくださいね。

私のWordpressではエディタのある画面を開くと必ず「テキスト」モードがデフォルトで表示されるようになっています。

WordPressのエディタでテキストモードを必ず最初に表示させる方法

メルマガ配信のプラグインとの関係でそうしているのですが、記事を書くときはやっぱりビジュアルエディタも使いたいので、ビジュアルモードが表示されないっていうのは非常に困ってしまいます。

 

「ビジュアル」タブをクリックしていくら待ってもビジュアルエディタのツールボタンが全く表示されない。エディタの部分をクリックしてもテキスト入力モードにならずただの白いエリア状態。。最近500エラーとか多いから、もしかしてまた固まったのかなと思って再読み込みをしてみたものの、全く同じ現象。。

 

どういうことなんだよぉお!?

と、軽くパニックになりながらもGoogle先生に聞いてみたところ…

 

 

こんな情報が見つかりました。

この不具合は、別の場所で一度構築したWordPressを使った場合に頻発します。

引用元のサイト

 

なるほどなるほど。そういえば今日サブドメインのサイトから幾つかの記事をインポートしたから設定がへんになっちゃったのかな、などと思いつつ、web-includeのtinymceを入れかえていざ新規投稿!

 

 

 

結果は、

何も変わってない・・・

 

もうこうなったらWordpressの再インストールか・・・???などという嫌な予感がしながら他に方法は・・・と検索したところ

wp-config.phpに以下のコードを追加するという話がありました。

define(‘CONCATENATE_SCRIPTS’, false );

参考:WordPressのビジュアルエディタがChromeでだけエラー

 

で、その通りにやってみたものの・・・

 

 

 

ダメでした・・・orz 

非常に残念。

 

 

そしてついにWodpressのトラブルシューティングへ。

そこでムムっこれは!!と思ったのが↓↓

7.プラグインが原因だった報告多数。全てのプラグインを一旦無効化し、一つずつ有効化して原因となっているプラグインを特定する

 

今さらな感じですが、そういえばプラグインによる不具合は結構よくあるんですよね。

というわけで、怪しげなのを一個一個停止しながらチェックすることに。

 

ポチポチやていったところ・・・

 

 

 

見つけてやりましたよ。^^ ついに、解決です。

 

 

悪さをしているプラグインはCrayon Syntax Highlighterっていうやつでした。

プラグイン自体が悪いとかじゃなくて、たぶんワードプレスのバージョンと上手く合わなかったんだと思いますが、とりあえず私の場合はこのプラグインを停止したことで見事解決に至りました。幸い、使ってみようとおもっってインストールしたものの、まだ必要にもならなかったプラグインだったので良かった。

これまでダッシュボードを使っていて困る経験はなかったんで、自分にとってはちょうど良い教訓だったと思います。バックアップは自動でいつも取ってありますが、万が一に備えることの重要性はホント言うまでもないですね。。

これでめでたく新規投稿ができるよ!っていうことで、以上、解決後お初の記事でした!

 

Mar.15.2015追記:現在はCrayon Syntax Highlighterを利用していますが、特に問題は起きていません。もしかしたらCrayon Syntax Highlighterと当時使っていた他のプラグインとの関係で起こっていた問題なのかもしれません。

たったの5分で設置!! シンプルかつクールな無料の問い合わせフォームBetter Contact Form

WEBサイト制作をしていると必ずと言っていいほど必要になるのが「お問い合わせフォーム」の設置。「僕のサイトにちょっとカッコイイコンタクトフォームをサクッと付けてほしいんだけど」と我が旦那様に頼まれて色々探してみた結果、最近流行りのフラットデザインのクールなコンタクトフォームがほんの5分でサクッと作れちゃう無料のWEBサービスを見つけたのでご紹介しようと思います^^ やりかたも非常に簡単なのでぜひ使ってみてください。

Better Contact Form

Better Contact Formの概要

公式サイト: http://bettercontactform.com/

一般的な問い合わせフォームの言語、必要な入力項目、配色とレイアウトの設定、問い合わせメールの送信先をオンラインで設定し、取得したコードをサイトのHTMLに貼りつけるだけで問い合わせフォームが設置できます。PHPの知識とか全然いらないです。スパム対策済みレスポンシブデザイン対応というありがたい機能もしっかりついていますよ。以下に具体的な使い方を図解します。

※上のリンクからサイトにアクセスすると雰囲気がよりリアルに分かると思います。

 

問い合わせフォームの作成と設置

サイトにアクセスすると以下のようなページが表示されますのでCreate Your Contact Formボタンをクリックします。

Better Contact Form公式サイト

 

 

以下のように問い合わせフォームを作成するページが表示されるので、自分のサイトのニーズに合わせて設定していってください。全部設定できたらSave Formをクリックします。

 

Better Contact Form設定

※言語は日本語も選択できますが、「おメールアドレス」みたいな感じで今のところ翻訳がちょっと面白いことになっている(?)ので英語のままの方がいいんじゃないかな?と思います^^; ウチの旦那のサイトはロシア語なんで問題ありませんでした(笑)

 

設定を保存するとHTMLに貼りつけるためのコードが表示されます。

Copy Codeボタンをクリックしてコピーし、自分のサイトのHTMLの一番最後(</body>の手前)に貼りつけます。このコンタクトフォームを表示させたいページのHTML全てに貼りつけてください。フッター用の共通HTMLがある場合はそこに貼りつけると一か所で済みそうですね^^

「後で編集したいかも」と思う場合は、アカウントを作成すると設定が保存されるので便利です。

Better Contact Formコード

 

というわけで、簡単に設置できるお洒落なコンタクトフォームBetter Contact Formのご紹介でした。