calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

すごい便利！WordPressでブログをリニューアルするときに役立つ３０

  • 作成：2013/06/17
  • 更新：2014/11/01
  • WordPress >
WordPress_blog

先日コムテブログをひっそりとリニューアルしたわけですが
カスタマイズしたい部分を調べるだけで膨大な時間がかかってしまいました。

今回はWordPressでブログをリニューアルしたり
新たに立ち上げたりするときに
参考にすると助かるサイトをまとめさせていただきました。

既存のサイトをレスポンシブ化したり、スムーススクロール、タブ、ロールオーバーを簡単に実装したり、高速化にセキュリティ対策。やらなきゃいけないことをしっかりメモ。

リニューアルのおかげでアクセスも1.3倍ほど上がったので、集客効果もあり。是非お試しを！

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

レスポンシブに対応させる
１．レスポンシブ対応なCSSの書き方
２．Adsenseタグを改変してレスポンシブ対応させる
３．PC／スマートフォンコンテンツ切り替え

jQuery
４．ページ内リンク／スムーススクロール
５．jQueryで、よく使用される機能をまとめて実装
６．横から出てくるメニューを作る／スマートフォン
７．オリジナルのデザインでツイート数とかを表示

高速化
８．サイトパフォーマンスを改善する
９．CSSスプライト、CDN、圧縮

記事をカスタマイズ
１０．記事のいろいろな情報を呼び出す
１１．記事をランダムで表示する
１２．記事ごとにCSSを追記する

画像をカスタマイズ
１３．画像サイズをリサイズ
１４．カテゴリ毎や固定ページに画像を表示
１５．アップロード画像の画質を向上させる

ソーシャルボタンまわり
１６．外部サービスに頼らずソーシャルボタン(Pocketなど)を設置
１７．Google+、Facebookのコメントを表示
１８．ツイート時にブログの色々な情報を表示させる

セキュリティ対策
１９．セキュリティ対策に2要素認証を使う
２０．不正アクセスログを記録
２１．フィードに著者の情報を入れ盗用を防止する

カテゴリ
２２．カテゴリーページのあらゆる文字数を統一、調整する
２３．フロントページに出す記事のカテゴリを調整する
２４．特定カテゴリの表示や表示件数を制御
２５．カテゴリー毎にアイコンを表示
２６．タグをハイライトする

バックアップ
２７．丸ごとバックアップする
２８．ブログのdescription・キーワードをページごとに自動出力

SEO
２９．SEOをまとめて強化する
３０．適切なパーマリンクへの変更

レスポンシブに対応させる

１．レスポンシブ対応なCSSの書き方

1_responsive

レスポンシブとはなんぞや？というところから書いてありますが、主にメディアタイプを指定したCSSの書き方です。初心者の方はここから読むとスムーズに理解できます。

２．Adsenseタグを改変してレスポンシブ対応させる

2_Adsense

Adsenseのタグを少しいじるだけでレスポンシブに対応できます。プログラムの知識なしで出来るので簡単。ユーザーエージェントで判別する方法は［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.comに書いてあります。

３．PC／スマートフォンコンテンツ切り替え

3_pc_mobile

関数wp_is_mobileを使うのでWPバージョン3.4以降から。以下のコードで簡単に切り替える方法です。こちらもAdsense切り替えなどに使えます。

jQuery

４．ページ内リンク／スムーススクロール

4_jQuery

このページのもくじに、スムーススクロールを使ってます。「var speed」の数値を大きくすれば、ヌル～と動くようになります。

５．jQueryで、よく使用される機能をまとめて実装

5_jQuery

スムーススクロール、タブ、ロールオーバーなどのサイト制作時に使うと便利な効果をまとめて実装できるプラグイン。ファイル数が多くなってきた人はこれで管理しましょう。

６．横から出てくるメニューを作る／スマートフォン

6_Sidr
スマートフォンで横からスライドしてくるメニューを表示する「Sidr」を使う方法。

７．オリジナルのデザインでツイート数とかを表示

7_fb_hb

プラグインを使わずに、はてブ数やイイね数を表示する方法。現在ツイート数は取得できないみたいだが、はてブ数やイイね数は問題なく表示できるとのこと。

高速化

８．サイトパフォーマンスを改善する

8_p3

ページ表示に負荷をかけているプラグインを発見する方法。スキャン後に表示に時間がかかっているプラグインが分かるので停止するだけ。

９．CSSスプライト、CDN、圧縮

9_MO Cache

高速化するためのプラグインやWebサービスをまとめました。他にCSSや画像ファイルを軽減する方法も記載。

記事

１０．記事のいろいろな情報を呼び出す

10_mb_substr

テンプレートタグを使う代わりにphpを使う方法など。他にphp関数であるsubstrを使って、本文を任意の文字数でカットする方法なんかも。

１１．記事をランダムで表示する

11_orderby_rand

記事をランダムで表示させるquery_posts() 関数のorderbyを使う手法。

１２．記事ごとにCSSを追記する

12_adcss

１回だけしか使わなかったり、特定の記事だけに適用したいCSSを追記することができるプラグイン。

画像

１３．画像サイズをリサイズ

13_thumbnail

レイアウトを整える上で、画像リサイズは必須になります。僕も複数のWordPressで使いました。このコードで便利なところは、サイズ指定で切り抜き出来る部分。

１４．カテゴリ毎や固定ページに画像を表示

14_cat

特定のカテゴリや固定ページに違う画像を表示させる条件分岐まとめです。企業サイトなんかに使えます。

１５．アップロード画像の画質を向上させる

15_file

画像を落として高速化する方法は最近でてきたけれど、アップロードした画質を向上させる方法は少し珍しかったので。逆に画質を調整してサイトパフォーマンスを上げる方法は画像を最適化するプラグイン WP Smush.it | たなブログ WordPress入門講座で。

ソーシャル

１６．外部サービスに頼らずソーシャルボタン(Pocketなど)を設置

16_sns

プラグインを使わずにソーシャルボタンをデザインしながら設置する方法など。PocketのボタンはPocket for Publishers: Pocket Buttonで取得可。

１７．Google+、Facebookのコメントを表示

17_google

Google＋やFacebookのコメントをブログに表示する方法。Google＋はコメントの他に共有も表示できるらしいです。

１８．ツイート時にブログの色々な情報を表示させる

18_twitter_cards

Twitterに色々な情報を沢山載せたい！そう思ったことが何度もあったので。申請から使えるまで意外と時間がかからないみたいですね。Twitter Cardsを使う手順を詳しく書いてあります。

セキュリティ

１９．セキュリティ対策に2要素認証を使う

19_auth

WPログイン攻撃が話題になって、僕も急いでユーザー名を変更しましたが、こちらの記事はユーザー名＋パスの他、認証コードを追加する方法。確かにこれなら、厳重です。

２０．不正アクセスログを記録

20_CrazyBone

以下２つの記事は、自分のブログが一体どれくらい不正アクセスされているのか、調べたりログを取ったりするプラグイン。

２１．フィードに著者の情報を入れ盗用を防止する

RSSを利用した自動コンテンツ配信サイトへの盗用防止対策。著者情報を自動で埋め込むことによって、こちらの著作物だと主張できる。

カテゴリ

２２．カテゴリーページのあらゆる文字数を統一、調整する

どんな時に使うのかというと、トップページやカテゴリページの一覧ページ。コムテブログはアイキャッチ画像横にタイトルと冒頭の一部を出してます。長すぎるタイトルや冒頭を自動で切って、レイアウトが崩れないようにしたいときに。

スタイルシートのみで文字数を調整したいときは

[CSS]
width: 300px;/*横幅は好きな長さを指定*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
[/CSS]

２３．フロントページに出す記事のカテゴリを調整する

23_homecat

トップページに出す情報をいろいろ調整できるプラグイン。対象カテゴリを選んだり、逆にあるカテゴリだけ外すなど簡単に指定できるのがポイント。

２４．特定カテゴリの表示や表示件数を制御

24_cat

カテゴリースラッグを判別して、カテゴリーごとに違う表示と件数を調整する方法。これを設定するだけで随分見栄えが良くなる。

２５．カテゴリー毎にアイコンを表示

25_icon

企業サイトのトップページで良く見る、更新情報のカテゴリ別に違うアイコンを設定する方法。テキストと画像だけより格段に見やすくなる。

２６．タグをハイライトする

カテゴリの現在位置は良く見るけど、タグの現在位置をハイライトする方法もあったのでメモ。

バックアップ

２７．丸ごとバックアップする

27_buckup

データベースやxmlだけバックアップする人は多いと思うけど、これはサイトを丸ごとバックアップする方法。実際のリストア作業まで解説してあるので助かります。

SEO

２８．ブログのdescription・キーワードをページごとに自動出力

28_meta

クライアントさんの自作テーマでプラグインが動かない時に実際こちらの記事を参照させていただきました。header.php内に埋め込んだら、ページごとに記事を抜粋してdescriptionを個別に出力出来たのでご紹介。

２９．SEOをまとめて強化する

29_SEO

集客に特化した初心者さんも、熟練者さんも絶対に入れておくべきSEO強化に必須のプラグインをまとめました。ALTタグやメタタグ、自動リンクなど自動出力系が便利です。

30_best

パーマリンク変更後に注意しなければならないのは、インデックスや表示速度。それを解決すべく.htaccessやリダイレクト処理の方法を解説してあります。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。