WordPress

WordPress4.5 に更新しました。編集とカスタマイズの改善点

Categories | ブログ(WordPress)

WordPress4.5がリリースされたので更新してみました。

編集とカスタマイズの改善がされたようです。

その中で私が注目したので、編集の改善では「書式のショートカット」。

カスタマイズの改善は「ライブレスポンシブビュー」。

 

WordPress 4.5 01 400x318 WordPress4.5 に更新しました。編集とカスタマイズの改善点

 

編集の改善:書式のショートカット

水平線と <code> が追加た。

半角でダッシュ3本(テンキーのマイナス)「—」を3回たたくと↓

 


 

↑横線 <hr> が自動に引ける。ただしWPは未だ「html5」には未対応なのがネック。

どう言うことかというと、テキスト入力で確認すると、<hr /> となる。

自作テーマは「html5」で作成しているので、構文上支障がでますね。

私的に、早いことWP本体をHTML5に対応してもらいたいです。

 

今後、水平線を頻繁に使いそうなので、スタイルシートに追記しておきました。

 

style.css

hr {
width: 80%;
height: 1px;
border: none;
border-top: 1px #096aa2 dashed;
}

 

 

■ カスタマイズの改善「ライブレスポンシブビュー」

 

WordPress 4.5 02 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

 

ダッシューボード > 外観 > カスタマイズ で、テーマをレスポンシブ表示させる機能。

左下のアイコンをクリックすると、PC・タブレット・スマホと表示が切り替えられる。

 

WordPress 4.5 03 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

タブレット表示

WordPress 4.5 04 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

スマホ表示

 

フリーテーマを選ぶ時に役立ちそうですが、自作テーマはもうレスポンシブ化しているので、

使うことはなさそう。

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / / / | 2016年4月13日 |

ブログ(ワードプレス)トップページの最新記事だけ大きく表示するPHPコード

Categories | ブログ(WordPress)

タテ長になってしまったブログ(ワードプレス)のトップページを、見やすく最新記事

だけを大きく表示させ、その他の記事はサムネイル(アイキャッチ画像)付きの見出し

だけにカスタマイズしました。

 

wordpress ブログ(ワードプレス)トップページの最新記事だけ大きく表示するPHPコード

 

いじったのは自作のテーマだけど、汎用のPHPであればコピペで大体が

通用すると思う。

 

カスタマイズしたファイルは「home.php」。

 

変更前のphpコード

<?php if(have_posts()): while(have_posts()): the_post(); ?>
	<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>

 

変更後phpコード

<?php if(have_posts()): while(have_posts()): the_post(); $counter++; ?>
	<?php if ($counter <= 1): ?>
	<?php get_template_part('content'); ?>
<?php else:?>

<?php get_template_part('content','excerpt'); ?>
<?php endif;?>

<?php endwhile; endif; ?>

 

変更後php、二行目に追加したコードは最新記事を判別する。

<?php if ($counter <= 1): ?>

 

6行目は最新記事以降の記事を表示させる。

<?php get_template_part('content','excerpt'); ?>

 

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / / / / | 2016年4月10日 |

ブログ(WordPress)やホームページにGoogleアドセンス広告を設置する方法

Categories | ホームページ ブログ(WordPress) SEO

ブログ(Wordpress)やホームページに、Googleアドセンス広告を設置する方法を、

図解入りで簡単に説明します。

 

1. Google AdSenseにサイトを登録

2. 広告のスタイルを決めてコードを取得

3. ブログ(Wordpress)やホームページに所得したコードを貼る

4. 広告を設置したことをAdSenseに知らせる

5. 承認されると広告が表示される

 

※ 今回Google AdSenseのアカウント取得ははしょります。

 

 

1. Google AdSenseにサイトを登録する手順

 

26 03 400x278 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

Google AdSense にログイン

①.  右上の歯車マークから

②. [設定]をクリック

③. 左メニューの[サイト管理] をクリック

④. ドメイン(URL)を入力して[サイトを追加] をクリック

注)「自分のサイトのみ自分の広告コードの使用が許可されています」にチェックを入れる

⑤. 左メニューの[アクセスと認証] をクリック

 

注)チェックを入れておかないと、後で通知が届き・・・

「このたびサイトの認証機能と管理機能を統合しました。つきましては、設定に誤りがないかご確認ください」

と、設定変更を促される。変更後は、48 時間以内に反映される。

このチェックボックスにチェック入れるのは必須。

 

 

 

2. 広告のスタイルを決めてコードを取得

 

26 01 400x163 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

Google AdSense にログイン

①.  [広告の設定] クリック

②. [新しい広告ユニット] クリック

 

 

26 02 400x326 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

名前: 適当

広告サイズ: オススメは、カスタマイズしやすい「自動サイズ(レスポンシブ)」

「保存してコードを取得」

 

広告ユニットは取得後でも簡単に変更できるが、広告サイズは変更出来ない。

 

 

3. ブログ(Wordpress)やホームページに取得したコードを貼る

 

26 04 400x255 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

広告ユニットで取得したコードをページに貼り付ける(コピペ)。

必須なことは、トップページ(サイトの最上のページ)に貼る。

・Wordpressがトップページの場合、取り合えず最新の投稿記事内か、

(ビジュアルじゃなくテキストページでね)

サイドバー(ウェジェット)に取得コードをコピペ。

・ホームページの場合、ドメイン/index.html に。

仮に下層のページに設置すると、初期設定中はAdSenseが認識してくれない。

 

 

 

4. 広告を設置したことをAdSenseに知らせる

 

26 05 400x237 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

①.右上の歯車マークから設定を選ぶ

②.アクセスと認証のサイトの認証をクリック

③.広告掲載先のURLを記入(「/」スラッシュなしのドメインだけを記述)

④.送信」をクリック

 

数分で確認され、その旨の内容が画面に表示される。

 

26 06 400x227 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

登録申請の作業は以上です。

後は待つだけ。

この時点で、広告はまだ表示されません。

 

 

 

5. 承認されると広告が表示される

 

26 07 400x282 ブログ(Wordpress)やホームページにGoogleアドセンス広告を設置する方法

 

2日後、登録申請が承認されたことのメールが届く。

「 AdSense 広告掲載に伴うウェブサイト承認完了のお知らせ 」

設置したページを確認すると、無事広告が表示された。

 

しまい

Comment(0) | Trackback(1)

TAGS: / / / / / / | 2016年2月27日 |

ワードプレス(WordPress)には、画像圧縮プラグイン「EWWW Image Optimizer」が必須

Categories | ブログ(WordPress) SEO

ワードプレス(WordPress)の最適化・高速化には、画像圧縮プラグイン

「EWWW Image Optimizer」が必須。

コンテンツが多くなると、表示スピードにストレスを感じ、改善を試みると、

たどり着くプラグインではないでしょうか。

現状バージョンは

EWWW Image Optimizer 2.5.0

EWWW Image Optimizer 400x341 ワードプレス(WordPress)には、画像圧縮プラグイン「EWWW Image Optimizer」が必須

 

Comment(0) | Trackback(0)

TAGS: / / / / / | 2015年9月5日 |

PageSpeed Insights と Facebook Page Plugin(旧Like Box) は相性が悪い

Categories | ホームページ facebook

ホームページならびにブログ(WordPress)の高速化に試み、ヨサゲなことをあれこれ

やってきましたが、PageSpeed Insights のスコアが一向に上がらない!!

それどころかスコが乱高下するする。いったいこれは何だろうと色々検証してみたら、

原因は Facebook Page Plugin (旧Like Box)が悪さしてました。

 

0904 400x300 PageSpeed Insights と Facebook Page Plugin(旧Like Box) は相性が悪い

 

実際にはPage Pluginがあろうがなかろうが、さほど表示スピードには変わりないようだ。

何故ならGTmetrixで実証済み。

どうしてもPage Plugin を使いたければ、いったんそのタグだけ削除して、

PageSpeed Insights でテスト後、元に戻すしかない。

私だったらいちいちメンドイから、さっくり削除してしまうけど。

と言うことで、現状はタイトルにあるよう、

PageSpeed Insights と Facebook Page Plugin(旧Like Box) は

相性が悪い

ってことです。

 

Facebook  Page Plugin 導入スコア

 

PageSpeed 01 400x300 PageSpeed Insights と Facebook Page Plugin(旧Like Box) は相性が悪い

 

 

 

Facebook  Page Plugin を削除したスコア

 

PageSpeed 02 400x300 PageSpeed Insights と Facebook Page Plugin(旧Like Box) は相性が悪い

Comment(0) | Trackback(0)

TAGS: / / / / / | 2015年9月4日 |

Head CleanerでWordPress(ブログ)の最適化?相性悪く導入を断念。

Categories | ブログ(WordPress) SEO

Head Cleaner バージョン 1.4.2.12

WordPress サイトの <head> の中身と、フッタ領域を整形しなおすプラグイン。

 

ブログの高速化に良かれと実装してみた。

しかし、先住の SyntaxHighlighter Evolved 3.1.13 と、レスポンシブLightbox  1.6.1

が反映されなくなる。非常に相性悪し。

 

SyntaxHighlighter の対処法として、「Head Cleaner 設定」

「 複数の JavaScript を結合する 」のチェックを外す。

 

Head Cleaner  400x300 Head CleanerでWordPress(ブログ)の最適化?相性悪く導入を断念。

 

しかし、当ブログでは対処後フリーズしてしまった。導入は却下。

しまい

Comment(0) | Trackback(1)

TAGS: / / / | 2015年8月31日 |

WordPress(ブログ)の表示をW3 Total Cacheで高速化?サーバーXREA編

Categories | ブログ(WordPress) SEO

Google は、サイトの表示速度が検索順位を決める重要な要素の1つであると、

とあるサイトで話題に挙げていた。薄々そんなこともあるんだろうなと、気にはして

いましたいたが、何も対処せず、ブログ(WordPress)に色々なプラグインを導入し、

記事もマメに書いていました。でも、次第に表示スピードが遅くなり、ストレスを感じ

だしていた今日この頃。Google Debelopers の 「PageSpeed Insights」なる、

表示スピードを解析してくれるところを見つけ、テストして見たんです。

 

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

 

PageSpeed Insights 400x300 WordPress(ブログ)の表示をW3 Total Cacheで高速化?サーバーXREA編

 

当ブログをテストしてみた結果、

 

 

PageSpeed 02 300x400 WordPress(ブログ)の表示をW3 Total Cacheで高速化?サーバーXREA編

 

モバイル 52/100  パソコン 55/100

 

大方の評価は予想していましたが、思わしくありませんね。

解析結果は修正箇所を何項目か提案しています。

どれからどうやっつけようか? 取り合えず「WordPress 高速化」で検索。

その中から有名なものを当ブログに実装しましたが・・・

 

W3 Total Cache : キャッシュの最適化

バージョン 0.9.4.1

 

※ 利用サーバー : バリューサーバー XREA / WordPress 4.3 ブログテーマ : 自作

 

WP ダッシュボードから「 W3 Total Cache 」を難なくインストール。

プラグインを有効化した後、

管理画面の「Performance」→「General Settings」で、何故かpage cacheが

「Disk :Enhanced」で有効化「Enable」出来ない。「Disk: Basic」を選択すれば

有効化できるけど、他のプラグインとの相性なのか?それともサーバー仕様?

仕方なく「Disk: Basic」でセーブして、表示スピードを検証。

 

PageSpeed Insights スコア  モバイル 62 / 100  パソコン 62/100

 

微妙な結果です。

 

実際の表示スピードは、飛躍的?どころか以前と殆ど変わりない。

page cache が「Disk :Enhanced」で有効化できれば、スコアももう少し期待できる

かもしれないが、今の私には知恵なし・手立て無し。

W3 Total Cache」は、多くの記事に書かれている「すぐれもの」って

ホントなんでしょうかね?

 

私的判断として XREAサーバーで、W3 Total Cache は不向きということで、

導入は却下。

 

追伸

W3TCを削除する場合は要注意。普通にプラグインを停止して削除すると不具合を起こす。

私がそうだったように。管理画面の「Performance」→「General Settings」で、

全ての「Enable」のチェックを外し、「Miscellaneous」内のチェックも全て外す。

それから通常のプラグイン停止し削除する。最後にFTPでサーバーにアクセスし、

wp-contentの中、もしくはwp-content/pluginsの中も残骸がないか確認し、

残っていたら削除すべし。

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / / | 2015年8月30日 |

投稿ページでビジュアルとテキストの切り替えが出来なくなったワードプレス

Categories | ブログ(WordPress)

現状バージョン:WordPress 4.3

不具合の症状は、投稿ページでビジュアルテキストの切り替えが出来ない。

0823 400x300 投稿ページでビジュアルとテキストの切り替えが出来なくなったワードプレス

以前も同じ症状があったので、自分のブログ履歴を検索したらありました。

新規投稿でビジュアルとテキストの切り替えが出来なくなった

 

問題を起こしたプラグインがバージョンアップしたら使えるようになったけど、

ワードプレスがバージョンアップしたせいで、また不具合を起こしたと推測する。

現在のバージョン

【 PS Disable Auto Formatting バージョン 1.0.10 】

停止すればビジュアルとテキストの切り替えが出来るようになるが、

割と重宝しているプラグインなだけに、早めに修正版を期待する。

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / / | 2015年8月23日 |

SEO Friendly Images が動きません。 不具合です。 ワードプレス(wordpress)

Categories | ブログ(WordPress)

良かれと思い当ブログにインストールしたプラグイン。

「SEO Friendly Images」バージョン:3.0.5

0427 01 400x173 SEO Friendly Images が動きません。 不具合です。 ワードプレス(wordpress)

プラグインを実装(有効化)しても変化なし。うまく起動しません。

・WordPress 4.2.1バージョン

・自作テーマ

何故?色々調べてみましたが、不具合についてのページを見つけることができず、

殆ど諦めていました。実は以前このプラグインを投与していたことがあり、

その時は問題なく動いていたのです。

じゃ、その時使っていたらしきバージョンまでダウンしたものを、

本家からダウンロードし、実装してみたんです。

https://wordpress.org/plugins/seo-image/

上記サイトの「Developers」から旧バージョンがダウンロードできます。

 

やはり動きました。バージョンは「2.7.6」です。

因みに2.7.6以上だと全部試したがダメでした。

当ブログとは別に、少し仕様変更した自作テーマでも試したのですが、

結果は2.7.6以上だと動きませんでした。

自作テーマだと相性悪いんですかね。それともバグ?

 

そんなことで、古いバージョンでも動いているので、不具合出るまでコレで

いいやと思ったんです。ただですね、ダッシュボードには・・・

0427 02 400x145 SEO Friendly Images が動きません。 不具合です。 ワードプレス(wordpress)

 ブログ開くたびに

「新しいバージョンの SEO Friendly Images が利用可能です。」

とメッセージがでます。勿論アップロードしてしまうと、動かなくなります。

うっかりアップしそう・・・ウザイな。

 

結局「SEO Friendly Images」は却下し、類似したものを探してみると、

ありました。「 WordPress SEO For Image

つづく

Comment(0) | Trackback(0)

TAGS: / / | 2015年4月27日 |

コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

Categories | ブログ(WordPress)

ブログのコメント欄をカスタマイズしました。

以前のカスタマイズは、アバターの選択肢がなかったのを使えるようにし、

各所微調整しました。備忘録です。

 

まず、

設定 > ディスカッション で「アバターの表示」にチェック入れる。

プラグイン「Simple Local Avatars」 を導入(インストール)

ユーザー > あなたのプロフィール で「Upload Avatar」 画像を取り込む

1107 400x218 コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

テーマディレクトリ内「style.css」のコメント欄を少し変更。

 

/*コメント欄のカスタマイズ*/

h3#comments {
	font-size: 11px;
	margin-bottom:20px;
	margin-top:30px;
}

#comments .navigation {
	padding: 0 0 18px 0;
}

.commentlist li.comment {
	line-height: 24px;
	margin: 0 16px 30px -30px;
	padding: 10px 15px 0 15px;
	box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
	background-color:#FFFFFF;
    list-style: none;
	font-size:12px;	
}

.comment-author {
	float:left;
}

.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author cite a {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author span {
	vertical-align:top;
	margin-right:30px;}

.comment-meta { margin-bottom:20px;}

.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
}

.commentlist p{ margin-left:50px;}

.reply {
	font-size: 12px;
	padding: 0 0 10px 0;
}

Comment(0) | Trackback(0)

TAGS: / / / / / | 2014年11月7日 |

« 古い記事 新しい記事 »