calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

プラグインは使わない！WordPress カスタマイズまとめ４０

  • 作成：2012/11/19
  • 更新：2014/11/01
  • WordPress >
wordpress

自分のブログならいいけど、受託の場合は出来るだけプラグインやブログパーツ使用は控えたい。

例えば、Zenbackやlinkwithinって便利だけど外部リンクが表示されちゃうから、クライアントさんには使えない。プラグインを出来るだけ使わずに、自分でやんなきゃいけないこともあります。まぁそこで

「分かんなくなったらここ見よう」と参考にさせていただいたサイトをまとめました。カスタマイズをやっていくうちに内部施策が充実したのか、アクセスも40日間で147%アップ。集客提案の一つとしても使えると思います。

フッターにこだわったり、タグ・カテゴリ一覧表示したり、サムネイルで関連記事を表示、アバターを写真にしたり、レスポンシブ、マルチサイト化にカートまで受託開発で必要なことなどもメモメモ。※一部プラグインを使用します。

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

Sponsored Link

もくじ

一元管理・CMS

１.マルチサイト機能で複数のブログを管理
２.CMSにして、ポートフォリオサイトを構築
３.静的ファイルを共存させて部分CMS化
４.ECサイトを構築
５.ショッピングカートを導入する
６.子サイトを作成する
７.子サイトにユーザを新規登録する

管理画面をカスタマイズする

８.ログイン画面のカスタマイズ
９.管理画面のカスタマイズ
１０.ウィジェットを自作
１１.カスタムフィールドをお手軽に実装
１２.リッチテキストエディタを封印
１３.デバッグ / 強制SSL / テーマの編集の無効化
１４.自動保存＆リビジョン管理を無効

レイアウトをカスタマイズする

１５.レスポンシブサイトでadsenseを切り替える
１６.ウィジェットをフッターに表示
１７.サムネイルつき関連記事(特定)
１８.サムネイルつき関連記事(全て)
１９.タグのリンクを表示する
２０.カテゴリー別記事一覧を表示
２１.カテゴリー毎の日付別アーカイブを表示
２２.トップページに最新記事5件をリスト表示
２３.外部RSS(twitter等)を表示
２４.アバターの登録・表示
２５.OGP設定
２６.ページネーション(ページ送り)を設置
２７.パンくずナビ設置
２８.Facebook・Twitterなどソーシャルボタン設置
２９.twitterウィジェットを表示、カスタマイズ
３０.記事ごとにfacebookのコメントを付ける
３１.jQueryでスライドショー
３２.jQueryでスクロールするといろいろ表示

開発・環境

３３.USBメモリ内にローカル環境を5分で構築
３４.記事編集画面で使える ショートカットキー
３５.FC2からWordPressへのブログ移行
３６.有料テーマ - ビジネス向けサイト作成用
３７.レスポンシブ - WordPressテーマ
３８.セキュリティ対策
３９.htaccess例
４０.データベースに直接アクセス

一元管理・CMS

１.マルチサイト機能

マルチサイトとは、ひとつのWPで複数のブログを設置できる機能。親のブログで設置したテーマなどが子ブログでも利用出来るようになる。これでMTに頼らずにすみます。

２.ポートフォリオサイトを構築

002

「カスタム投稿タイプ」と「カスタムタクソノミー」を使う。スライドショーはカンプの作り方から解説してある。

３.部分CMS化

htaccess

「新着情報」や「よくある質問」など、よく更新するページを静的ファイル（html）にしたいときに。.htaccessにいろいろ追加します。

４.ECサイト構築

ec

すいません、プラグインを使ってしまいます。僕はeccubeカスタマイズする会社にいるので、興味津々。デモサイトを見てみたけど、wordpressっぽい・・・ eccubeで作るよりもデザインカスタマイズは楽ちんでしょうね。WordPressとWelcartによるECサイト構築方法です。

５.ショッピングカート

カートレンタルやインストール方法など。ここでもWelcartですよ。

６.WordPressで子サイトを作成

ko

サブディレクトリー型で試した内容。アップグレード後は未確認。

７.子サイトにユーザを新規登録

親サイトへの新規登録を防ぐ方法。コードは「親サイト側」のfunctions.phpに追加します。

管理画面をカスタマイズする

８.ログイン画面をカスタマイズ

008

テーマフォルダ内で完結させる方法。独自のスタイルシートを用意すればあとはさくさくと出来上がります。

９.管理画面をカスタマイズ

009

ダッシュボード、投稿画面、エディタ、バージョンアップ通知など。表示オプションでヴィジェットなどを非表示には出来るけど、最初から非表示にもできる。

１０.ウィジェットを自作する

10

クライアントさん次第で必要となるのでメモ。クライアントは知識不要で好きな箇所に好きなときに好きにコンテンツを管理する事が出来る。CMSを扱う人なら知っておきたい。

１１.クラスライブラリを使用する

11

クラスライブラリを使用する方法。オリジナルのカスタムフィールドを作成する。

１２.リッチテキストエディタを封印

12

CMS的に利用する場合、リッチテキストエディタが非常に使いにくいとの思いから作られた記事。確かにクライアントさんのブログ記事を見ていると、ビジネスなのにコピペや絵文字連発などやりたい放題。絵文字を使わないでくださいとも言えないし・・。

１３.wp-configでできる色々

13

デバッグモード、JavaScriptの連結を無効化、クエリの履歴を保存する、ログイン・管理画面のアクセスを強制SSLにする、Cookieドメインを設定するなど忘れがちなことをコード付きで記載してあります。

１４.自動保存とリビジョンを停止

14

リビジョンでもとに戻すことなどほとんどないし、自動保存で助かったこともほとんどない。容量を圧迫されるくらいなら停止。

レイアウトをカスタマイズする

１５.レスポンシブでadsenseを切り替える

レスポンシブにすると大きめのバナーがはみ出してしまいます。それはいかんと調べてみるとUA(ユーザーエージェント)で大きさを切り替える方法を発見。ブロガーさんは必須です。

１６.ウィジェットをフッターに表示する

16

ウィジェットをフッターに表示する方法。管理画面でドラッグ＆ドロップで自由に設定出来るのがポイント。これでサイドバーがすっきりする。

１７.特定のサムネイル付きの関連記事

プラグインだとページごとに設定したり、細かく分けたり出来ない。こちらは特定のカテゴリを指定する方法に加えて、特定のカテゴリを除外する方法も記載されている。

１８.サムネイル画像＋関連記事

17

linkwidthinやzenbackに抵抗がある人はこれ。functions.phpとsingle.phpに変更を加えるだけ。

１９.タグのリンクを表示

19

タグのリンクを表示する超簡単な方法。少しのコードをループ内に埋め込むだけ。リスト形式で表示する方法を記載している。

２０.カテゴリー別記事一覧を表示

一つのページでカテゴリーごとの一覧を表示する。一覧表示方法とカテゴリーIDを指定して表示する方法。

２１.アーカイブ表示

特定のカテゴリーの日付別アーカイブを表示する。普通アーカイブ表示って全体が出力されてしまう。でもこれならカテゴリーを選べる。

２２.新着リスト表示

「ソースを表示」のリンクをクリックして下さい。トップに最新記事５件＋NEWアイコンをつける方法。過去３０日以内の記事にだけアイコンを表示させる。

２３.外部RSS(twitter等)を表示

ツイッターなどの外部RSSを表示させる方法。「PHP Code Widget」というプラグインが必要になってしまうけど、直接PHPを編集できるのでカスタマイズしやすい。

２４.アバター写真表示

24

Gravatarに登録するだけ。ちょっと社内では使いにくいかもしれないが、簡単にアバターを変更できる。

２５.OGP設定

OGP （Open Graph Protocol）とはプログラムから読める形でhtmlに情報を記述すること。facebookウォールでのリンク表示を変えたり音声を追加したり。

２６.ページネーション

26

ページネーションとはフッターに表示される「ページ送り」のこと。プラグインだとテーマにあったデザインや機能が制限されてしまうこともある。こちらは２種類のノーマル版と拡張版のソース。

２７.パラメータでパンくずナビ

27

カスタム投稿タイプ、カスタムタクソノミー、フロントページの表示設定など、多彩な設定。指定可能なパラメータ一覧が助かる。

２８.ノンプラグインでSNSボタン設置

twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなどのソーシャルメディアを共有するボタン設置方法。tumblrまであるのは嬉しい。

２９.自分のツイートをかっこよくのせる

コードが少なくていい。公式ヴィジェットを使用する。

３０.記事毎にfacebook Commentsをつける

30

wordpress⇔facebook双方の自動反映がうれしい。

３１.jQueryテクニックとチュートリアル

javascript、jQueryとwordpressを組み合わせて実現するテクニックのチュートリアル。icalみたいなカレンダーに惹かれました。

３２.jQueryでスクロールする効果一覧

このブログを下までスクロールすると、「おまけ」が右下に出てきますが、スクロールすることで動的に何かを出す方法。フェードやドロップダウンなど。

開発・環境

３３.USBメモリ内にローカル環境

ソフトウェア「Instant WordPress」をダウンロードしてセットアップする方法。環境ごとに持ち運び出来るのは便利です。

３４.記事編集画面でのショートカットキー

ショートカットキーの数が少ないので覚えれば作業効率化できる。でもどちらかというと自分用です。

３５.FC2からWordPressへのブログ引越

35

FC2ブログのデメリットってスマホ表示する際の追っかけてくる広告やアドセンス非表示。ほんとあれどうにかならないのかな。乗り換えをしたい人が多いのでメモ。

３６.有料ならこのサイトで選ぶ

あたりまえの話しですけど無料版はコピーライトを消すと使えなくなることが多いです(というか消したらだめ)。有料を何度か購入してますがレスポンシブも充実してるし、ショートコードが便利。チョイスするときは評価順にみてます。

３７.無料のレスポンシブまとめ＋作り方

会社のHPもレスポンシブにしました。無料版になってしまうけど、シンプルでレスポンシブなものをピックアップあります。

showcase

レスポンシブ対応しているjQueryライブラリ

３８.セキュリティ対策

SSLやIP制限など基本的だけど忘れがち。exec-PHPプラグインは使っちゃダメとのことです。

３９. .htaccessのいろいろ

パフォーマンス向上の為に必読。キャッシュ、アクセス制限、静的ファイルの操作方法など。

４０.データベースに直接アクセスする

複雑な条件でデータを読み込みたいときや自由にデータを扱いたいときに。イチから分かりやすく解説してある。

 41.追加分

2012/11/27：WordPressで、画像投稿時に画像リンクURLの初期値をなしにする。画像だけじゃなくて他にも色々設定できます。
WordPressで、画像投稿時に画像リンクURLの初期値をなしにする方法 | CREAMU

2013/04/10：無料のテーマやテンプレート、また作成方法を追加しました。
WordPressテーマと作成方法まとめ

今回はノンプラグインだということですが、プラグインも必要な場合があったので一部記載してます。この他にも便利なカスタマイズ方法を発見したら追加していこうと思います。

スポンサード リンク

関連記事

Comments

  1. 【LIFREESTYLE】2012年11月18日〜11月25日／ブログデザインに関するエントリーが豊富だった一週間。僕もそろそろ本気でデザインチェンジしたい！！ | LIFREESTYLE より:
    2012年11月24日 6:12 PM

    […] プラグインは使わない！Wordpress カスタマイズまとめ４０ | コムテブログ […]

    返信
  2. WordpressカスタマイズTipsまとめ[プラグイン無しVer] 覚えておいて損はないぜ！【生ネタ】| MagLog(まぐにぃのブログ) より:
    2013年10月20日 10:37 AM

    […] プラグインは使わない！Wordpress カスタマイズまとめ４０ | コムテブログ「分かんなくなったらここ見よう」と参考にさせていただいたサイトをまとめました。 … […]

    返信

Leave a Comment

コメントする

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