すごい便利！WordPressでブログをリニューアルするときに役立つ３０
先日コムテブログをひっそりとリニューアルしたわけですが
カスタマイズしたい部分を調べるだけで膨大な時間がかかってしまいました。
今回はWordPressでブログをリニューアルしたり
新たに立ち上げたりするときに
参考にすると助かるサイトをまとめさせていただきました。
既存のサイトをレスポンシブ化したり、スムーススクロール、タブ、ロールオーバーを簡単に実装したり、高速化にセキュリティ対策。やらなきゃいけないことをしっかりメモ。
リニューアルのおかげでアクセスも1.3倍ほど上がったので、集客効果もあり。是非お試しを！
Sponsored Link
もくじ
レスポンシブに対応させる
１．レスポンシブ対応なCSSの書き方
２．Adsenseタグを改変してレスポンシブ対応させる
３．PC／スマートフォンコンテンツ切り替え
jQuery
４．ページ内リンク／スムーススクロール
５．jQueryで、よく使用される機能をまとめて実装
６．横から出てくるメニューを作る／スマートフォン
７．オリジナルのデザインでツイート数とかを表示
高速化
８．サイトパフォーマンスを改善する
９．CSSスプライト、CDN、圧縮
記事をカスタマイズ
１０．記事のいろいろな情報を呼び出す
１１．記事をランダムで表示する
１２．記事ごとにCSSを追記する
画像をカスタマイズ
１３．画像サイズをリサイズ
１４．カテゴリ毎や固定ページに画像を表示
１５．アップロード画像の画質を向上させる
ソーシャルボタンまわり
１６．外部サービスに頼らずソーシャルボタン(Pocketなど)を設置
１７．Google+、Facebookのコメントを表示
１８．ツイート時にブログの色々な情報を表示させる
セキュリティ対策
１９．セキュリティ対策に2要素認証を使う
２０．不正アクセスログを記録
２１．フィードに著者の情報を入れ盗用を防止する
カテゴリ
２２．カテゴリーページのあらゆる文字数を統一、調整する
２３．フロントページに出す記事のカテゴリを調整する
２４．特定カテゴリの表示や表示件数を制御
２５．カテゴリー毎にアイコンを表示
２６．タグをハイライトする
バックアップ
２７．丸ごとバックアップする
２８．ブログのdescription・キーワードをページごとに自動出力
SEO
２９．SEOをまとめて強化する
３０．適切なパーマリンクへの変更
レスポンシブに対応させる
１．レスポンシブ対応なCSSの書き方
レスポンシブとはなんぞや？というところから書いてありますが、主にメディアタイプを指定したCSSの書き方です。初心者の方はここから読むとスムーズに理解できます。
２．Adsenseタグを改変してレスポンシブ対応させる
Adsenseのタグを少しいじるだけでレスポンシブに対応できます。プログラムの知識なしで出来るので簡単。ユーザーエージェントで判別する方法は［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.comに書いてあります。
３．PC／スマートフォンコンテンツ切り替え
関数wp_is_mobileを使うのでWPバージョン3.4以降から。以下のコードで簡単に切り替える方法です。こちらもAdsense切り替えなどに使えます。
jQuery
４．ページ内リンク／スムーススクロール
このページのもくじに、スムーススクロールを使ってます。「var speed」の数値を大きくすれば、ヌル～と動くようになります。
５．jQueryで、よく使用される機能をまとめて実装
スムーススクロール、タブ、ロールオーバーなどのサイト制作時に使うと便利な効果をまとめて実装できるプラグイン。ファイル数が多くなってきた人はこれで管理しましょう。
６．横から出てくるメニューを作る／スマートフォン
スマートフォンで横からスライドしてくるメニューを表示する「Sidr」を使う方法。
７．オリジナルのデザインでツイート数とかを表示
プラグインを使わずに、はてブ数やイイね数を表示する方法。現在ツイート数は取得できないみたいだが、はてブ数やイイね数は問題なく表示できるとのこと。
高速化
８．サイトパフォーマンスを改善する
ページ表示に負荷をかけているプラグインを発見する方法。スキャン後に表示に時間がかかっているプラグインが分かるので停止するだけ。
９．CSSスプライト、CDN、圧縮
高速化するためのプラグインやWebサービスをまとめました。他にCSSや画像ファイルを軽減する方法も記載。
記事
１０．記事のいろいろな情報を呼び出す
テンプレートタグを使う代わりにphpを使う方法など。他にphp関数であるsubstrを使って、本文を任意の文字数でカットする方法なんかも。
１１．記事をランダムで表示する
記事をランダムで表示させるquery_posts() 関数のorderbyを使う手法。
１２．記事ごとにCSSを追記する
１回だけしか使わなかったり、特定の記事だけに適用したいCSSを追記することができるプラグイン。
画像
１３．画像サイズをリサイズ
レイアウトを整える上で、画像リサイズは必須になります。僕も複数のWordPressで使いました。このコードで便利なところは、サイズ指定で切り抜き出来る部分。
１４．カテゴリ毎や固定ページに画像を表示
特定のカテゴリや固定ページに違う画像を表示させる条件分岐まとめです。企業サイトなんかに使えます。
１５．アップロード画像の画質を向上させる
画像を落として高速化する方法は最近でてきたけれど、アップロードした画質を向上させる方法は少し珍しかったので。逆に画質を調整してサイトパフォーマンスを上げる方法は画像を最適化するプラグイン WP Smush.it | たなブログ WordPress入門講座で。
ソーシャル
１６．外部サービスに頼らずソーシャルボタン(Pocketなど)を設置
プラグインを使わずにソーシャルボタンをデザインしながら設置する方法など。PocketのボタンはPocket for Publishers: Pocket Buttonで取得可。
１７．Google+、Facebookのコメントを表示
Google＋やFacebookのコメントをブログに表示する方法。Google＋はコメントの他に共有も表示できるらしいです。
１８．ツイート時にブログの色々な情報を表示させる
Twitterに色々な情報を沢山載せたい！そう思ったことが何度もあったので。申請から使えるまで意外と時間がかからないみたいですね。Twitter Cardsを使う手順を詳しく書いてあります。
セキュリティ
１９．セキュリティ対策に2要素認証を使う
WPログイン攻撃が話題になって、僕も急いでユーザー名を変更しましたが、こちらの記事はユーザー名＋パスの他、認証コードを追加する方法。確かにこれなら、厳重です。
２０．不正アクセスログを記録
以下２つの記事は、自分のブログが一体どれくらい不正アクセスされているのか、調べたりログを取ったりするプラグイン。
- WordPressへの不正アクセスログを記録して見せてくれるプラグイン Crazy Bone - 頭ん中
- WordPressログイン画面へのアクセスをデスクトップやスマートフォンにプッシュ通知するプラグイン | 代助のブログ
- パスワード生成（パスワード作成）
２１．フィードに著者の情報を入れ盗用を防止する
RSSを利用した自動コンテンツ配信サイトへの盗用防止対策。著者情報を自動で埋め込むことによって、こちらの著作物だと主張できる。
カテゴリ
２２．カテゴリーページのあらゆる文字数を統一、調整する
どんな時に使うのかというと、トップページやカテゴリページの一覧ページ。コムテブログはアイキャッチ画像横にタイトルと冒頭の一部を出してます。長すぎるタイトルや冒頭を自動で切って、レイアウトが崩れないようにしたいときに。
スタイルシートのみで文字数を調整したいときは
[CSS]
width: 300px;/*横幅は好きな長さを指定*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
[/CSS]
２３．フロントページに出す記事のカテゴリを調整する
トップページに出す情報をいろいろ調整できるプラグイン。対象カテゴリを選んだり、逆にあるカテゴリだけ外すなど簡単に指定できるのがポイント。
２４．特定カテゴリの表示や表示件数を制御
カテゴリースラッグを判別して、カテゴリーごとに違う表示と件数を調整する方法。これを設定するだけで随分見栄えが良くなる。
２５．カテゴリー毎にアイコンを表示
企業サイトのトップページで良く見る、更新情報のカテゴリ別に違うアイコンを設定する方法。テキストと画像だけより格段に見やすくなる。
２６．タグをハイライトする
カテゴリの現在位置は良く見るけど、タグの現在位置をハイライトする方法もあったのでメモ。
バックアップ
２７．丸ごとバックアップする
データベースやxmlだけバックアップする人は多いと思うけど、これはサイトを丸ごとバックアップする方法。実際のリストア作業まで解説してあるので助かります。
SEO
２８．ブログのdescription・キーワードをページごとに自動出力
クライアントさんの自作テーマでプラグインが動かない時に実際こちらの記事を参照させていただきました。header.php内に埋め込んだら、ページごとに記事を抜粋してdescriptionを個別に出力出来たのでご紹介。
２９．SEOをまとめて強化する
集客に特化した初心者さんも、熟練者さんも絶対に入れておくべきSEO強化に必須のプラグインをまとめました。ALTタグやメタタグ、自動リンクなど自動出力系が便利です。
３０．適切なパーマリンクへの変更
パーマリンク変更後に注意しなければならないのは、インデックスや表示速度。それを解決すべく.htaccessやリダイレクト処理の方法を解説してあります。
- [WordPress]パーマリンクの変更時に便利！新しいパーマリンク構造のURLへリダイレクトしてくれるプラグイン「Permalink Redirect」 | DelightMode
- WordPress向けSEO上級編：適切なパーマリンクへの変更と複数言語への対応 | Web担当者Forum
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment