メニューにウィジェットが挿入できる！？
↑のようにメニューをマウスオーバーすると地図まで表示できるので会社やお店のサイトには最適ですね。
個人では地図は必要ないですが使い方次第では、カテゴリーしか表示できなかったメニューバーが魔法のバーに変身しそうです♪(^^)

SimplicityにMax Mega Menuを入れてみました。

メニューのカスタマイズ項目が多い WordPressの日本語無料テーマ「Simplicity」ですが、ちょっと前まで Bloggerブログで私が愛用してたメニューとはちょっと違うためカスタマイズしたいけど、まだPHPが分からない(^^;)

しかたないからプラグインで探してみました。

Max Mega Menuのインストール

プラグイン ⇒ 「新規追加」から「Max Mega Menu」を検索

インストール ⇒ 有効化します。

外観⇒メニューから↑のように をいれて設定し保存をクリック。

これでブラウザの新しいタブで自分のブログを開き 再読み込みすればメニューが変わってると思います。

Max Mega Menuの設定

外観⇒Max Mega Menuから設定画面を開きます。

↑ General Settingsではデフォルトのままでいいと思います。

下のToolsタブもキャッシュとデータ削除に関することなのでそのまま触らずに。

Theme Editorで デザインを変更してみましょう。

General Theme Settings

Menu Bar

Top Level Menu Items

Mega Panels

Flyout Menus

CSSでの追加設定（私のメニューの場合）

Custom Stylingへの追加

↓このように、メニューの文字に影を付けたい人だけ行なって下さい。

/** 追加 **/
div#mega-menu-wrap-header-navi a {
  text-shadow: 1px 1px 1px #000;
}

Simplicityのテーマをお使いの場合

スマホのMENUをタップして開き、一番下の項目をドロップダウンさせると
下のコンテンツと合体したように崩れてしまいます。

その場合は、外観⇒テーマの編集からSimplicityのnavi.phpを開き
一番下のコメントアウトした部分の上、画像の赤線部分に↓のタグを記述して下さい。
親テーマの編集になるため、必ずバックアップをとってから！

2015/8月更新
現在のSimplicityとMax Mega Menuの最新版では、この追記は必要ありません。

<div style="clear:both;"></div>

次に、
Simplicityでは幅が狭まった時にモバイルメニューに変わり、
ヘッダーにメニューボタンが現れます。

このボタンも消しておかなければメニューが2つになってしまいます。

外観⇒テーマの編集から Simplicity child ⇒スタイルシート (style.css)へ

/* モバイルメニュー非表示 */
#mobile-menu {
  display: none !important;
}

↑このように記述して下の「ファイルの更新」を押します。

お疲れ様でした。
これで「Max Mega Menu」のインストールと初期設定は完了です。

長くなったので次は、メニューへウィジェットを登録する方法と
タイトル前へのアイコン設置方法など実践的な使い方の解説をします。

記事はこちら

Max Mega Menuの使い方と応用とSticky Menuの設定

最後までご覧いただきありがとうございました。

前回に続いて、
今回は「Max Mega Menu」へウィジェットやボタン、アイコンを登録してみましょう。

インストールと初期設定についてはこちら 

WordPressに簡単最強レスポンシブ「Max Mega Menu」

「Max Mega Menu」へウィジェットを挿入

何のウィジェットをメニューバーに組み込めば便利だろう？

と、訪問者視点で考えてみると一番便利なのが「検索」じゃないかな？と思います。
私自身、気に入ったブログでは「こんな話題に触れてないかな？」とサイト内検索をよくするので。(^^)

では、検索バーから順番にやってみます。
でも、その前に！

「Max Mega Menu」の設定で気を付けること

外観⇒ウィジェットを開きMax Mega Menuのウィジェットをみると

Do not manually edit this area.（手動でこのエリアを編集しないでください。）
と書かれています。
↑ここからはドラッグ＆ドロップなどでウィジェットを入れないようにして下さい。

検索ウィジェットの挿入

まずは投稿⇒カテゴリーから新規カテゴリーを追加します。

名前に分かりやすいように「検索」
スラッグは英字で「search」
親は　「なし」
↑
これで下の新規カテゴリーを追加ボタンをクリック。

次に、外観⇒メニューを開きます。

カテゴリーをドロップダウン表示させて、先ほど作った空のカテゴリー「検索」に チェックを入れてメニューに追加をクリック。
（画像では説明用に作ったため「検索2」となっています）

追加すると右側のメニュー構造にリストとして現れます。

移動ツールで設置したい階層へ移動し、右下のメニューを保存をクリック。

保存すると項目をマウスオーバーすることでMega Menuボタンが出現するのでクリック。

Mega Menu 設定

開いた設定ウィンドウの説明です。

1. ここでメニュー項目の設定をします。
2. を入れます。
3. ドロップダウンすると自分の登録してるウィジェットがリストされるので「検索」を選択。
4. 1つしか登録しない場合でもカラム数で横幅を決めることができます。

General Settings

次に一般設定の項目です。

1. メニュータイトルを隠します。
2. 矢印を隠します。
3. リンクを無効にします。
4. メニューの揃え方。
5. サブメニューの揃え方。

 私のメニューの場合は、項目が多すぎて④をleftとしてますが、項目が少ない場合は、検索だけ右寄せのRightを選択してもいいと思います。

変更を保存をクリック。

Menu Iconの選択

メニュータイトル前にアイコンを選択して設置することができます。
↑でHide Textに を入れた場合はタイトルがアイコンだけの表示にすることができます。

検索なので虫眼鏡を選択。

こんな風にアイコンだけのメニューボタンができました。

マウスオーバーすると↓このように現れます。

リンクの挿入

私のメニューにはボタンでメールフォームへのリンクをはっています。

メールでなくとも、SNS等の自分のページへリンクを貼りたい方もいると思います。
その場合は、外観⇒メニューからリンクを選択して下さい。

↑リンクさせたいURLとリンクテキストを入力してメニューに追加をクリック。

あとは、上記の「検索」と同じように進みますが、
Mega Menu 設定では、ウィジェットは選択しないで下さい。

General Settingsでは、Disable Linkのチェックを外します。

変更を保存をクリックして、次のMenu Iconの選択で好きなアイコンを選択すれば完了です。

私の使ってるメールフォーム

Bloggerの連絡フォームが嫌なので外部メールフォームを設置

応用編

 その他のものを追加したい場合。

 私のように海外からの訪問を想定して翻訳を入れたい場合は、
プラグインの追加から翻訳を有効化することで、Mega-Menuから選択が可能になります。
私が追加したのはGoogle Website Translator です。
（古いプラグインばかりで選択肢が少なかったので他にお薦めがあれば教えて下さいね。）

 外部からのもの、例えばiframeなどを設置したい場合は、
テキスト・ウィジェットを選択してコードを入れることで可能だと思います。
（まだ私は試してませんが）

 他にもImage Widget などを追加することでドロップダウンで写真ギャラリーを表示することもできます。

☆★ 最短4分で広告を掲載できる『忍者AdMax』

禁断の技（自己責任で！）

Max Mega Menuには、このフリー版とは別に有料のPro版があります。
個人だと１サイト19ドル。
機能もかなり増えて魅力的ですが、フリー版で充分だと思います。

「Sticky Menu」について

Pro版での機能の1つに「Sticky Menu」といってページをスクロールするとメニューバーが最上部に来たときに固定される機能があります。

Bloggerブログでは、この機能が付いたテンプレートを使用していたこともあり、このブログにもすぐにカスタマイズして設置したのですが、ある記事を読んですぐにやめました。

ドロップダウン式の「Sticky Menu」はアドセンス規約違反！

ページをスクロールしててアドセンス広告が表示されてる上で、上部に固定されたメニューからサブメニューがドロップダウンされると誤クリックを誘発する恐れがある。

実際に質問した人へのアドセンス側からの解答は、
「見つけたら通報して下さい」と言ったそうなので恐ろしくて使えません。(^^;)

なので「アドセンスはしてないよ～」とか「ドロップダウンじゃないから大丈夫？」という方のみへ自己責任で設置方法を解説します。
（Max Mega Menuでドロップダウンさせない人はいないかな・・？）

Sticky Menu の設定方法

参考になったサイトです。
JavaScript – CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る – Qiita 

テーマによってIDやclass名が違ってますが
Simplicityの場合で解説すると子テーマのcssへ以下を記述します。
（必ずバックアップをとってからして下さい）

/* Sticky Menu */
header {
    height: 100px;
}
.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}
#navi {
  width: 100%;
}

3行目のheight: 100pxはご自分のブログのヘッダーの高さに合わせて下さい。

続いて、サーバーのSimplicity childフォルダ内の「javascript.js」を開き以下を記述します。

jQuery(function() {
    var nav = jQuery('#navi');

    // メニューのtop座標を取得する
    var offsetTop = nav.offset().top;

    var floatMenu = function() {
        // スクロール位置がメニューのtop座標を超えたら固定にする
        if (jQuery(window).scrollTop() > offsetTop) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
});

２行目の#naviの部分を、ご自身のメニューのIDへ変更して下さい。
Simplicityはこのままで大丈夫です。

以上の２つをコピペするだけで、メニューをスクロールしてみると上部でメニューバーが固定されたと思います。

これってスマホでは本当に便利な機能なので私も使い続けたいけど、アドセンスをしてるので残念でした。(T_T)

どなたか、メニューをホバーした時だけアドセンスがクリックできなくなるJSを作って下さ～い。

以上！お疲れ様でした♪(^^)/

前回に続いて、今回はヘッダーへ追加した広告エリアの活用法です。

前記事

Simplicityのヘッダー・タイトル横にウィジェット追加して広告設置

記事内に貼るバナーなら、記事内容にマッチしたものを選んで設置できますがサイドバーなどウィジェットエリアに設置したバナーの場合、コンテンツマッチ広告でもない限り訪問者に毎回毎回同じ広告が表示されることとなり、せっかくのスペースが勿体ないですよね。

ページを開く度にランダムで広告を切替える方法

以前、アフィリエイトサービスのバリューコマース でローテーションバナーを作る方法を解説しました。

記事はこちら

バリューコマースでローテーションバナーの作り方

各アフィリエイトサービスにはこのように自社広告主のみをローテーションで切替えることが可能なところもあります。
A8.net  は、ローテーションの他にもページにマッチした広告を自動で切替えてくれるツールがあります。

でも、複数のアフィリエイトサービスに登録してると
このASPでは「これ」、こっちのASPでは「これ」。
など、どうしても欲しい物が分かれてしまいますよね？

それら複数のASPから選んだ広告を、1つの広告エリアへページの読み込み毎にランダムで広告を切替えてくれるプラグインを紹介します。

このブログのヘッダーの広告はローテーションにしてるので再読み込みなどして動作を確認してみて下さい。
（たまに切り替わらないことがあります。）

Random / Rotating Ads V2 の使い方

プラグイン⇒新規追加からRandom / Rotating Ads V2を検索します。

インストール⇒有効化します。

1. ツール⇒Datafeedr Random Ads V2をクリック。

2.  Add New Groupをクリックすると↑の画像の画面になります。

3. Ad Group Name:へ好きな名前を登録（ここでの名前は公開されません）

4. Before Ad:とAfter Ad:は広告の前後に入れるテキスト（空欄でOK）

5. このスペースへ広告コードを1つペーストします。

6. Add Boxボタンで広告を追加します。

7. Save Ad Groupで設定を保存。

8. 1度保存したコードを変える場合は、上書きしないでRemove this adで削除してから追加して下さい。

保存して外観⇒ウィジェットを開くと

Datafeedr Random Adsのウィジェットができてるので、前回作ったad-header-widgetのテキスト・ウィジェットを削除してからドラッグ＆ドロップします。

これでページをして登録した広告が切り替わるか確認して下さい。
レイアウト崩れ防止のためにも、広告は同じサイズを登録した方がいいと思います。

以上！お疲れさまでした♪(^^)/

サイドバーにウィジェットを登録し過ぎると、本文よりサイドバーの方が長くなりカッコが悪いですよね？
WordPressのタブ化するプラグインを紹介してるサイトは数あれど、紹介してるのに実装してるサイトが1つも無い！？

実際の動作を確認してからインストールしたかったけど、仕方ないから色々と比較して「Widgets In Tabs」に決めました。

⇒ここのサイドバーのタブ化されたボタンを押して動作確認してみて下さい。
スマホからもタブが問題なく動作してると思います。

汎用性と見た目ならWidgets In Tabsで決まり！

数あるタブ化するプラグインには、すでに決まったウィジェットしか登録できないものや見た目が残念なもの。古くて互換性が怪しいものなどが殆どでした。

例えば、「最新記事」「人気の投稿」「カテゴリー」などは常に表示したほうがいいのに、それらをタブ化して期間で表示したところでタブをいちいち切替えてくれる訪問者がいるとは思えません。

troubleだから、紹介しても設置してる人がいないんだと思います。

Widgets In Tabsなら好きなものをタブに登録できるため
このブログのように、
1番目の開いたタブには常に表示させたい「人気の投稿」を。
2番目と3番目の切り替えで開くタブには、重要ではない別に開いてくれなくてもいいけど設置して検索エンジンに回って欲しいものを登録しています。

とはいえ、Widgets In Tabsもデフォルトでは見た目が残念なためCSSで調整します。

デフォルトはこんな感じです。 

Widgets In Tabs のインストール

プラグイン⇒新規追加からWidgets In Tabsを検索

インストールして有効化します。

外観⇒ウィジェットを開きます。

Widgets In Tabs のウィジェットができました。

↑この右側のWidgets In Tabsへ左側の利用できるウィジェットからタブ化したいウィジェットを選択してドラッグで中へ入れます。

こんな感じに
私は「人気の投稿」「コメント」「タグ」を入れました。

登録しただけでは、まだブログでは表示されてません。
次に配置する場所を設定します。

利用できるウィジェットからWidgets In Tabsをサイドバーウィジェットへドラッグ。

Widgets-In-Tabsの▼をクリックして設定画面を開きます。
タブを開くとき、閉じるときのエフェクトを選択できます。
種類はとても多いのでお好みでどうぞ。

私の設定はこちら 

Widgets-In-Tabs のボタンを整形する。

お使いのテーマや、ご自身のカスタマイズによってサイドバーのタイトルにはHタグのスタイルが適用されていると思います。

私の使用してる「Simplicity」のテーマだとサイドバーのタイトルはｈ4タグ。
それに独自でCSSで黒帯と赤のシャドウを入れてるため
Widgets-In-Tabsのデフォルトの見た目は↓こんな感じです。

これではあまりにも弱すぎるためボタンを整形し、3つのタブをバランスよく配置するCSSを追加します。

/* widgets_in_tabs---------------------------------------------- */
.widget_widgets_in_tabs ul {
  display: table;
  margin-left: -14px;
  padding-left: 0;
  margin-top: 3px;
}
h4.widgettitle.wit-title.ps-container a {
  color: white;
  font-size: 16px;
  padding: 4px 5px;
  text-align: center;
  border: 1px solid;
  width: 83px;
  display: table-cell;
}
h4.widgettitle.wit-title.ps-container {
  display: inline-block;
  padding: 5px !important;
}
h4.widgettitle.wit-title.ps-container a:hover {
  background-color: rgb(255, 157, 0);
}
.ps-container .ps-scrollbar-x {
  display: none;
}
a.wit-tab-title.wit-selected {
  background: rgb(255, 157, 0);
}

↑は私の場合の設定です。

幅が300pxのサイドバーで同じように3つのタブと同じ文字数なら
9行目のフォントカラー
21・27行目でタブのバックグラウンド色を好みに変更するだけで大丈夫ですが、タイトルの文字数が変われば8行目からのタブ・コンテナーの微調整が必要です。

以上！お疲れ様でした。(^^)/

おすすめ

WordPressに簡単最強レスポンシブ「Max Mega Menu」

ブログでコメント欄に表示される自分の画像「アバター」
自分をイメージで認識してもらうための大事なコミュニケーションツールなのに、WordPressでは管理画面から簡単に、とはできません。

プラグインでも簡単に設定できますが、プラグインの欠点と
WordPressと連携して利用できるGravatarの登録と設定方法。
Gravatarに登録時、なぜ WordPressにログインできないか？
アバターを無料・登録無しで作れるサイト。についてのお話です。

アバターはなぜ必要か？

私は一月前までGoogle Bloggerに居たのでGoogle+のアバターが表示されていました。
SNSをしてる方なら分かると思いますが、
相手の名前をもちろん覚えてるのにアイコン画像のアバターが変わってしまうと、すぐには気付きません。

つまり、名前ではなくアバターで相手を認識してるからですね。

更には、
誰でも思い当たる節があるとは思いますが、
SNS等では、アバターが無く名前もHN（ハンドルネーム）の人は警戒されるし覚えてもらえません。

WordPressの場合だと

↑このようにアバターの有る無しで印象や、覚えていただく確率も変わってきます。

プラグインで表示するアバターの欠点

多くのプラグインがある中で互換性があって設定も簡単な
Avatar Manager

登録無しで自分のブログに好きな画像をアバターとして使用できますが、
欠点は、他のブログやフォーラムでは表示されません。

アバターは、自ブログでも大事ですが
一番効果を発揮するのが他サイトでコメントした時です。

自分を知らない人達の中へ名前だけでコメントを残しても、覚えて貰える確率は殆ど０に近いと思います。

他人のWordpressサイトでも表示できるGravatar

WordPressを運営するなら絶対に登録をしたほうがよいと言われるGravatar

メールアドレスによって登録したアバターを表示してくれるので WordPressサイトやGravatarを使えるサイトでグローバルに自分のアバターを表示することができます。

私もすぐに登録したかったのですが
エックスサーバーで自動インストールした WordPressがなぜかGravatarでの登録時にログインできない現象に陥った結果、プラグインで対処したことで、ずいぶんと遠回りしてしまいました。

解決方法

サーバーでインストールしたWordPressがログインできない！？

Gravatarの登録と設定方法

LINKGravatar のページへ行きます。

Gravatarを作成をクリック。

登録画面が開きます。

ここで上記の解決方法の記事で書いたように
WordPress.comの登録を済ませてる方は「ある」を、
まだの方は「ない」の赤丸部分をクリックして先に登録を済ませて下さい。

あなたのWordPress.comアカウントでGravatarにログインしますか？

Approve（承認）をクリック。

管理画面が開きます。

赤で囲んだ部分をクリックして画像を追加します。

自分のパソコンからファイルを選択

次の画面で切り抜くことができます。

大で表示されるときを考慮して
Gravatarの画像サイズは、
最終的には200pxの正方形にするのが綺麗だと思います。

レーティングの選択

Gを選択

管理画面が開き、今設定した画像でよければこのままで。
変更するには再度、追加して下さい。

↑の「このGravatarを確認」をクリックで詳細を確認できます。

反映には5分から10分とありますが
私の時はすぐに反映されてました。

↑のマイプロフィールをクリック。

表示名がデフォルトではメールアドレスになってるので好きな名前に変更して
プロフィールを保存をクリック。

↑の画像の右側タブからウェブサイトをクリックして自分のブログを追加しておくこともできます。
その場合は、レンタルサーバーで WordPressをインストールした方は、WordPress.comサイトを追加側でなく、サイトを追加側から登録。

他のタブは触らなくて問題ありません。

訪問者のアバターの設定

自分のアバターが表示されるようになれば、ついでに訪問者がコメントしてくれた時のアバターも表示するようにしてみましょう。

設定⇒ディスカッションを開きます。
一番下のデフォルトアバターの項目

自分のアバターを持っていないユーザーには、汎用ロゴまたはメールアドレスをもとに作成される画像を表示できます。

↑このように書かれてるように、Gravatarに登録していれば他者のサイトでも自分のアバターが表示されますが、登録してない人の場合は
このデフォルトアバターで設定したアイコン画像になります。

文字だけで書かれた選択項目で分かりにくいので、
各アバターの画像を拾ってきました。

デフォルトでは「ミステリーパーソン」となってると思いますが、コミュニケーション能力０の影のみの姿なため、私は「Wavatar」を選択しています。

アバターを作りたい！でも恥ずかしい

自分の写真を載せるのは抵抗がありますよね。
私はSNSで慣れてしまいましたが、写真でなくとも自分に似せたイラストでアバターを作れる無料サイトがたくさんあります。

無料でアバターが作れるサイト

ここで紹介するサイトは無料ですが利用規約を必ず読んでから利用して下さい。
（規約の厳しいサイトと、登録が必要なサイトは載せてないつもりです。）

【無料】似顔絵イラストメーカー :フリーでプロフィール画像を作成 

顔アイコンジェネレーターでオリジナル顔アイコンを作ろう | Pocky Street 

萌える！アバターメーカー – 無料/フリーで作成 

似顔絵ウェルカムボード★メール – 写真をメールするだけ！無料 

似顔絵ジェネレーター : 似顔絵メーカー 

箱ドットジェネレータ　～選んで作ろう箱ドット～ 

丸い顔アイコンジェネレータ -Icon Generators- 

他にもここで紹介しきれてないサイトがたくさんあります。

広告最短4分で広告を掲載できる『忍者AdMax』

 あとがき

フリーブログだとアバターを表示してる人は多いのに、WordPressでは、せっかくサーバーを借りてまでブログをしてるのにアバターで自己PRをしないのはもったいないですよ。

たかがアバター、されどアバター。

「アバターもエクボ」で好感度をUPしましょう♪（ん？）

以上！お疲れ様でした。(^^)/

 WordPressのTOPページをカテゴリー別の新着記事一覧を表示するようにカスタマイズしました。
どんな感じかは、HOME を覗いてみて下さい。

カテゴリーの多いブログや、異なる話題を頻繁に取上げるブログの場合だとTOPページが全体の新着記事よりも、カテゴリー別に分けて表示されてた方が訪問者にとっても見やすいのじゃないかな？と思います。

私のHOMEページ通りの解説になりますが、
２種類のプラグインのインストールや、お使いのテーマに適用されてるスタイルによっては修正箇所が多く発生するかもしれません。
個別ページに作るし、親テーマも弄らないのでやり直しが効きますが、くれぐれも自己責任で修正できる方のみでお願いします。

Page Builder by SiteOrigin のインストール

ページを分割してウィジェットを配置するためのプラグイン
「Page Builder by SiteOrigin」をインストールします。

インストールして有効化します。

Page Builder by SiteOrigin の使い方。

固定ページ⇒新規作成をクリックすると作成画面右上に
Page Builderのボタンが追加されました。

↑のPage Builderボタンをクリック。

Add Rowをクリック。

今回は横を2列のページにするので
Set Row Layoutを「2」として下のInsertをクリック。

分割した部分にウィジェットを登録します。

↑のように分割された部分をクリックして選択状態にし、Add Widgetをクリック。

使用できるウィジェット一覧が表示されるので「テキスト」を選択

作成したいカテゴリーの数だけ同じように追加して下さい。

PHP Text Widget のインストール

テキスト・ウィジェットにPHPを記述できるようにするプラグイン
PHP Text Widget をインストールします。

このプラグインはインストールだけで何の設定もいりません。

ウィジェット・タイトルにリンクを貼る方法

ウィジェットのタイトルには普通に書いてもリンクは貼れません。

リンクを貼るには、タイトル部分を空白にしてテキスト欄へタグを記述します。

私のTOPページのBODYカテゴリーのタイトルの場合、
タイトル前にFont Awesomeのアイコンを入れて↓のように書いています。

<h3 class="widget-title"><a href="http://lahatnggusto.com/category/body"><i class="fa fa-child fa-fw"></i> BODY</a></h3>

広告最短4分で広告を掲載できる『忍者AdMax』

指定したカテゴリーの新着情報をサムネイル付きで取得

<h3 class="widget-title"><a href=" カテゴリーのURL ">< Font Awesome >カテゴリー名</a></h3>
<div class="categorybox">
<table align="center">
<tbody>
<?php
  $post_id = get_the_ID();
  $newposts = get_posts( array(
    'category_name' => 'カテゴリー名',
    'posts_per_page' => 4,
    'exclude' => $post_id ));
  foreach( $newposts as $post ):
    echo '<tr height="75px">';
    setup_postdata( $post );
    $new_title = get_the_title($post);
    echo '<td width="75px">';
    if(has_post_thumbnail($post->ID)) {
      $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),large);
      echo "<img src='{$img[0]}' alt='' height='75' width='75'>";
    }
    echo '</td>';
    echo '<td valign="top" padding="0 5px">';
    echo "<a href='" . get_permalink($post) . "'>";
    echo "{$new_title} <span style='font-size:13px'>(" . get_post_time('Y.m.d',false,$post) . ")</span>";
    echo '</a>';
    echo '</td>';
    echo '</tr>';
  endforeach;
  wp_reset_postdata();
?>
</tbody>
</table>
</div>

↑これの1行目がタイトルとなります。
カテゴリーのURLと名前、Font Awesomeのコードを追記して下さい、

8行目の””の間へカテゴリー名を入れて下さい。

9行目の「4」は表示する記事数です。

$img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),large);

$img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'thumb100');

以上のソースを自分用に書き換えて、テキスト・ウィジェットへペーストします。

タイトルは空欄のままテキストエリアへソースをペースト。

右側のWidget Classへpostbox1と入力。
このClass名は2分割したウィジェット全てのスタイルを適用させるのに使用するので、作ったウィジェット全てに記述して下さい。

右下のDesignで背景色を設定できます。

CSSの追加

/* topページ・カテゴリbox */
.postbox1 h3.widget-title {
  margin-bottom: 0;
  padding: 5px 0px 2px 10px;
  background-color: rgb(254, 156, 0);
  color: white;
  border-bottom: none;
  border: 1px solid #000;
  text-shadow: 1px 1px 3px #000;
}
h3.widget-title a {
  text-decoration: none;
  color: #FFF;
}
h3.widget-title a:hover {
  color: aqua !important;
  font-size: 26px;
}
.categorybox a {
  text-decoration: none;
  font-size: 15px;
}
.categorybox {
  display: table;
  width: 100%;
  line-height: 1.2em;
}
.categorybox img {
  vertical-align: middle;
  max-height: 75px;
  overflow: hidden;
}
.categorybox td {
  display: table-cell;
  height: 75px;
  border: 1px solid #000 !important;
}
.categorybox tr td {
  vertical-align: middle;
}

タイトル色の変更は、6行目。
マウスオーバー色は、16行目で変更できます。

以上！お疲れ様でした。

おすすめ

WordPressに簡単最強レスポンシブ「Max Mega Menu」

前回は、WordPressのテーマ『Simplicity』で、ユーザー名と表示名が同じ場合に警告文が表示されるので、それを非表示にすることについてお話しました。

今回は、テーマは関係無しに
ユーザー名を知られていようが、メアドを知られていようが
ログインURLを変更することで↑のイメージ画像のように訪問者に対して玄関がどこにあるか分からないようにしてしまうプラグインを紹介します。

Login rebuilder のインストール

プラグイン⇒新規追加からLogin rebuilderを検索。

インストールして有効化します。

設定⇒ログインページをクリック。

ログイン設定画面が開きます。

無効なリクエスト時の応答：サイトトップへリダイレクトにチェック。

ログインファイルのキーワードはランダムで表示されるキーなので変更せずそのままで。

新しいログインファイル：このWordPress-login.phpと書かれた通りにするとその下に書かれた
URL: http://ブログアドレス/wordpress-login.phpが新しいログインURLになります。

 WordPressのデフォルトのログインURLは
http://ブログアドレス/wp-login.phpなので↑のままでも不正アクセスは減ると思いますが、どうせ設定するのなら推測されないURLにして不正アクセス者がたどり着けない玄関にしておきましょう。

新しいログインファイルの.phpの前を推測されない任意の文字列で書き換えます。

例：aaaaaa-bbbbbb-cccccc-login.php

書き換えると下に、書き換えられたURLが表示されるのでコピーしておきます。

ステータス：稼働中にチェック。

変更を保存をクリック。

ログインURLの確認。

まずは本来のURL：http://ブログアドレス/wp-login.phpへアクセス。

ログイン画面でなく、自分のブログTOPページが開けば成功です。

次に新しいログインURLへアクセス。
こちらはちゃんとログインページが表示されていれば成功です。

注意点

↑の確認の通り、今後は新しいURLからしかログインできません。
忘れないようにメモしておきましょう。

新しいphpファイルができても、元のファイルwp-login.phpはプラグインが読み込み時に使用するため削除しないで下さい。

以上！お疲れ様でした。(^^)/

WordPressのプラグイン『WordPress Popular Posts』を横並びに配置する方法の備忘録です。
デフォルト設定でサムネイルの大きさを変更したりなどはできますが縦並びのためスペースがもったいないと思ってる人にはお薦めの配置ですが自己責任でお願いします。

WordPress Popular Postsのインストール

↓ここからインストール⇒有効化します。

WordPress Popular Posts

• Hector Cabrera
• 値段無料
• 平均評価★★★★★ (118)
• プラットフォームWordpress

外観⇒ウィジェットからWordPress Popular Postsで表示する設定画面を開きます。

↑のようにサムネイルを100×100にすると

300px幅のサイドバーに設置した場合は↓こんな感じです。

この縦並びを横並びにして、サイドバーに丁度良いように2列に配置する方法を解説していきます。

デフォルトのスタイルをコメントアウトする。

プラグイン⇒インストール済みプラグイン⇒WordPress Popular Posts⇒編集

開いた編集画面で『wordpress-popular-posts/style/wpp.css』を選択。

この中の.wpp-list liのスタイルをコメントアウトして無効にしておきます。

.wpp-list li {
		overflow:hidden;
		float:none;
		clear:both;
	}

↑この部分を/*と*/で挟むだけです。

↓1と7行目のように。

/*
	.wpp-list li {
		overflow:hidden;
		float:none;
		clear:both;
	}
*/

コメントアウトしたことで並びが初期化されました。

ここから子テーマへ新しいスタイルを追加していきます。

サイドバーに合わせたスタイルの適用

外観⇒ウィジェットからWordPress Popular Posts
サムネイルのサイズを130pxに指定して保存をクリック。

サムネイルが少し大きくなりました。

セルの大きさと並び方を指定します。

子テーマ（推奨）のstyle.cssへ以下を追加

.wpp-list li {
    width: 130px;
    height: 210px;
    border: 1px solid;
    display: table-cell;
    float: left;
    clear: none;
    margin: 0px 8px 14px 0px;
    overflow: hidden;
    background-color: white;
}

300pxのサイドバーで2列の横並びとしては丁度良い大きさになりました。
10行目のbackground-color: white;で背景を白に指定しています。
このwhiteを変えることで色を好みに変更することが可能です。

タイトルがはみ出してしまってるので調整します。

.wpp-post-title {
  position: relative;
  display: block;
  width: 122px;
  height: 76px;
  padding: 0px 0 4px 6px;
  bottom: -4px;
  line-height: 1.3em;
  overflow: hidden;
  font-size: 15px;
}

これで丁度良い並びになったと思います。

閲覧数「VIEWS」の表示と位置

今回の設定では「VIEWS」にチェックを入れても隠れてしまい表示されません。

表示させるには、

外観⇒ウィジェットからWordPress Popular Posts
Display viewsにチェック

cssを追加

span.wpp-views {
    position: relative;
    top: -210px;
    float: right;
    background-color: black;
    color: white;
    font-size: small;
    padding: 0 3px;
}

これで「VIEWS」の数が上側に表示されました。

5行目で背景色、6行目で文字色を変更可能です。
（位置はこのセルの設定に合わせてあります）

WordPress Popular Postsのアップデート

プラグインの更新があった場合は
『デフォルトのスタイルをコメントアウトする。』で解説した部分だけをやり直して下さい。

 あとがき

自分用の備忘録のため、300pxのサイドバーに合わせた設定に限定しました。

 WordPressのテーマが『Simplicity』の方ならこのままコピペだけで利用できると思いますが自己責任でお願いします。

「VIEWS」についても、その他の「著者名」「日付」「コメント数」なども表示したい場合はこのレイアウトでは諦めるかセルの大きさから見直しが必要だと思います。
cssが分かる方だけ自力でお願いします。

以上！お疲れ様でした。(^^)/

WordPressに簡単で綺麗なスライダーを設置できるプラグインを紹介します。
上のスライダーはプラグイン付属のサンプル画像集ですが、 画像を変更しリンク設定するだけで、商品紹介や各カテゴリーへのジャンプなどにも使えて豪華なページに仕上がりますね。
有料テーマに多いスライダーですが、この無料プラグインを入れてしまえば有料テーマを購入する魅力はなく、seoでもsns連携でも無料テーマの方が優れてるものが多いような気がします。

Master sliderのインストール

Master Slider - Responsive Touch Slider

• averta
• 値段無料
• 平均評価★★★★ (106)
• プラットフォームWordpress

↑ここからインストールして有効化して下さい。

メニューバーにMaster Sliderのボタンができました。
settingsはそのままで上のMaster sliderをクリック。

下側の青いボタン +Create New Sliderをクリックします。

好みのスライダーを選択してCreateボタンをクリック。

Master sliderの使い方

編集したいスライダー名をクリックして編集画面を開きます。

赤線で囲んだ部分。

• 目のアイコン　表示の切替え。
• Add Slide　　新しいスライド画像を作ります。
• Fillmode　　　画像の表示方法

↑の画像の下側のタブでVideo and Linkを開きます。

URLの欄へ画像にリンクさせるアドレスを入力します。
隣では同じページで開くか新しいウインドウで開くかなどを選択。

Slider Settings

↑の画像の左上のタブ。

Slider Settingsについての解説です。

General Settings

Slider name　名前を決めます。

Slider width　まずはデフォルト値で様子を見て、すき間が気になるようでしたらポストエリアの横幅を入力します。（このブログは横幅が680px）

あとは↑の画像の通りで。

Slider Transition

スライダーの動き方の設定です。

ノーマルかフェード。 横方向、縦方向。などが選べます。

Transition speedでは動く時間を設定します。
静止時間ではありません。 静止時間はSlideタブにあるSlide durationで設定します。

Navigation

スライドの動きや操作の設定です。 好みでどうぞ。
画像はここのスライダーの設定です。

Appearance

Skin では、スライダー上の矢印を変更できます。
あとはそのままで大丈夫です。

プレビューで確認、完成したら。

設定を何度やり直してもSave Changesを押さなければ反映されませんが、Previewでは何度でも確認できます。

完成したら［masterslider id="1"］と書かれたショートコードをペーストします。

YoutubeやVimeoをスライドさせる方法。

私は、Master sliderを使ってYoutubeをスライドさせています。

これと同じもので解説すると、
Youtubeのサムネイルを680×383にリサイズしてスライドに登録します。

YoutubeのURLの書き方。

↑の画像のようにVideo embed srcの欄へ、
//www.youtube.com/embed/ここにyoutubeの動画ID

これでスライダーでは画像だけ読み込み、クリックしてから動画を読み込むため動作が軽くなると思います。

Master sliderの裏技。Youtubeボタンに変更。

デフォルトではビデオの再生ボタンは白丸なので、これをYoutube風にカスタマイズしました。

↑左がデフォルト。右がカスタマイズしたYoutube風です。

CSSスプライトの画像をカスタマイズ

これらのボタンはCSSスプライトとして１つの画像にまとめられてるため、変更するとなるとめんどくさいため画像を作り替えました。

↑左がデフォルト。右がカスタムです。

この右側をここからダウンロードしてから自サーバーへアップロードして下さい。

Slider SettingsのSlider custom styles :からCSSを追加します。

.ms-skin-default .ms-slide .ms-slide-vpbtn, .ms-skin-default .ms-video-btn {
  background: url(ここに画像URL)no-repeat 0px -150px;
  width: 80px;
  height: 56px;
  left: 48%;
}

↑2行目の（）内へアップロードした画像URLを記述。

お疲れ様でした。 これでこのブログと同じものが作れたと思います。

これでもまだ機能を追加したいと思う方には有料版のPRO版があるようです。

毎度毎度、各アップデートが恐ろしい WordPressですが、

WordPressを4.3にアップデートしたら記事作成画面で「ビジュアル」と「テキスト」のエディタが切り替えできなくなりました！？

原因となる問題のプラグインはすぐに見つかったから無効にすれば即解決。
となれば良かったのですが無効にした方が不具合の発生が全体に及ぶ大切なプラグインでした。(^^;)

PS Disable Auto Formattingが死んだ！

WordPressのおせっかい機能である自動整形を無効にしてくれることで人気の
PS Disable Auto Formatting

人気のプラグインですが更新が止まってることでついに互換性に不具合が生じました。

前述したように
記事作成画面で「ビジュアル」と「テキスト」のエディタが切り替えできません。

PS Disable Auto Formattingを無効にすると

プラグインを停止して無効にしてしまえば、
エディタの切替えは可能になりましたが問題が・・！

過去記事の全てのブログカードに＜br＞が勝手に入ってしまいました。

TinyMCE Advancedで代用できるが・・・

ビジュアルエディタの拡張で入れてるTinyMCE Advanced

TinyMCE Advanced

• Andrew Ozz
• 値段無料
• 平均評価★★★★★ (163)
• プラットフォームWordpress

設定⇒TinyMCE Advanced

Stop removing・・・・に を入れます。

これで「ビジュアル」と「テキスト」を行き来しても勝手にタグが消えることはなくなりましたが、勝手に＜br＞が入るのは止まりません。

PS Disable Auto Formattingを生き返らせる方法

TinyMCE Advancedで100％代用はできなかったので諦めてアップデートを待つしかないのか？

しかし、世の中には頭の良い人がいるもので互換性がなくなったPS Disable Auto Formattingを使い続ける方法を見つけた方がいました。

LINKPS Disable Auto Formattingが効かないエラーの修復方法！プラグイン改造でWordPressアップデート後も使える裏技！ | 自作PCテクニカルセンター

プラグイン⇒インストール済みプラグインから
PS Disable Auto Formattingの編集をクリック。

ps-disable-auto-formatting/ps_disable_auto_formatting.php の編集から

add_filter( ‘print_scripts_array を探して//を追記してコメントアウトします。

これでエディタの切替えができるようになりました。

前述のTinyMCE Advancedの設定と併用することで元に戻りましたが、
PS Disable Auto Formattingを停止してる間に更新した記事には崩れが出てたので修正しました。

セキュリティー面なら仕方ないけど、望んでない拡張機能のアップデートに付き合わされて不具合が発生するのは勘弁して欲しいですね。