カテゴリー別アーカイブ: 紹介

2月20日(土) CMS演習⑤ 講義内容

WordPressをさらに便利に! 色々なプラグイン

WordPressの特徴の一つに、多様なプラグインがある。
ユーザー数が多い=開発者も多く、多種多様なプラグインが日々追加されている。
プラグインとは拡張機能の事で、デフォルトでは備わっていない様々な機能を補う事が出来る。種類が余りにもおいので、纏めサイトや検索を上手く使って、必要で効果的なプラグインを導入していこう。

プラグインの導入

プラグインの導入自体は、テーマの時とあまり変わらない。
ダッシュボードの「プラグイン」から「新規追加」を選択し、欲しいプラグインを検索すれば良い。
インストールした後は、「有効化」しないと使えないので注意しよう。

導入までは全てのプラグイン共通だが、使い方はそれぞれのプラグインによって大きく異なる。
有名なものであれば日本語での紹介サイトも多いので、紹介記事がどれだけあるかも判断基準の一つになる。
大抵の場合、ダッシュボード内のどこかに設定メニューが追加されているので、まずはそれを探すと良い。
どこにメニューが増えるかは作り手の意図によるが、一番外側や「設定」の中にある場合が多い。

プラグインの紹介

講義で解説したものに加え、いくつか紹介したいと思います。

WordPressインストール時に入っているプラグイン

三つほど、常に初期でインストールされているプラグインがある。
必要に応じて有効化しよう。

akismet
スパムコメントを弾いてくれる有能なプラグイン。
コメント機能を使う際は必須と言っていい。
ただ有効化するだけでは効果がなく、wordpress公式への登録とキーコードの設定が必要になる。
【Akismet】スパムコメントを防ぐ!WordPressプラグイン
WP Multibyte Patch
WordPressはもともと英語圏のシステムなので、文字数の設定が1バイト単位で行われている。
これは日本ではマルチバイト(一文字に2バイト以上)の全角文字が一般的なので、そちらに設定変更してくれるプラグイン。有効化しておくと時折問題になる間違いがなくなる。
とりあえず有効化すると良い。
Hello Dolly
これはただのプラグインではありません。
有効化すると、なんとダッシュボードの右上に、世界的に有名な歌、「Hello Dolly」の歌詞の一節をランダム表示するという素晴らしい機能をもっている。
……ようは慣例的にインストールされている、冗句プラグイン。WordPress公式の遊び心が垣間見える。
真っ先に削除されることも多いのだが、なんとなく削しづらい。興味があれば有効化してみよう

機能的に便利なプラグイン

All in One SEO Pack
通常に利用するサイトの場合、ほぼ必須と言ってもいいプラグイン。
WordPressにおけるSEO対策の決定版ともいえる。かなり多機能だが、ページ単位でタイトルやメタキーワードが入れられたりと、細かいSEO対策が可能。
Welcart
WordPress用のショッピングカート制作用プラグインで一番有名なもの。
かなり多くの設定が出来、カスタマイズ性も高い。しっかり使うにはそれなりの知識が必要になる。

ただし、ECキューブなど、ECサイト専用のCMSも存在するので、ショッピングサイトを構築する場合はそもそもどのシステムを利用するかから検討する必要がある。WordPress「でも」ショッピングサイトが出来るという事が重要。

jetpck
超多機能プラグイン。一口で説明できないくらい色んな機能が内包されている。どちらかというと、色んな有名プラグインをまとめて導入できるもの。
「これさえあれば何もいらない」くらい多機能な反面、使用しない機能も多くなってしまうので、使いどころは考えどころ。
一つ、二つの機能のみを設定するのであれば、専用プラグインの導入を検討してもよいかもしれない。
Jetpack by WordPress.comプラグインの使い方
実に31種類もの機能を内包するマンモスプラグイン
Contact Form7
簡単にお問い合わせメールフォームが設定できる。
拡張機能も多く、使いやすいのが利点。WordPressで一番有名なプラグインかも知れない。
Contact Form DB
コンタクトフォーム7に入力された内容を、データベースに格納してダッシュボードで閲覧できるプラグイン。
唯のメールフォームではなく一覧で見たい時に割と重宝する。
MW WP Form
Contact Form7の欠点として、デフォルトでは確認画面が出せない点がある(元々確認画面を重要視するのは日本だけらしいです)。
こちらのプラグインは確認画面も対応しているので、状況によってはこちらを使った方が楽な場合もある。
Add Quick Tag
投稿や固定ページの編集を飛躍的に楽にするプラグイン。編集者がHTMLタグを理解していること前提。
投稿画面でもHTMLタグは使えるが、コードヒントは出てきてくれないので中々難儀する。
そんなとき、このプラグインであらかじめタグを設定しておけば、ボタン一つでタグが書き込める。
このブログでも愛用しています。
Duplicate Post
記事を複製できるプラグイン。デフォルトだとなぜかコピー機能が付いていないので、割と重宝する。
似た記事を入れたい時や、開発時にテスト的に投稿を何件か出したい時にとても楽になる。

js的なプラグイン

プラグインの中には、これまでjQueryで設定してきたスライダーやライトボックスが導入できるものもある。
WordPressでしか使えないが、これらを入れると比較的楽に見た目の機能も調整できる。さらにスライダーなどでは、ダッシュボードから画像が選択できるメリットもある。
もちろん、自前でjQueryを入れて動かすことも可能なので、プラグインにない動きでも実現は出来る。

Simple Lightbox
ライトボックスを導入できるプラグイン
Meta Slider
4種類ほどのスライダーが実装できる。カスタマイズも比較的分かりやすい。
Dynamic To Top
上に戻るボタンが簡単に実装できる。とはいえ、これくらいは自前で実装してみたいところ
プロが選ぶ!WordPressプラグインおすすめ50選【2016年版】
選出自体も役立つのですが、下の方にとても良いことが書いてあったので、引用させて頂きました。

WordPressプラグインを活用する際の注意点

WordPressでは日々多種多様なプラグインが公開されています。
機能やスペックは勿論のこと、セキュリティやサポートなども考慮して選ぶ必要があります。プラグインを活用していく上では以下の点に気をつけて選定・使用しましょう。

1.機能性は良いか

同じような機能を持つプラグインは複数あります。言うまでもないことではありますが、その中でも機能性やスペックが優れているもの、自分が必要とする機能が備わっているものを他のプラグインとよく比較して選びましょう。

2.セキュリティの安全性は高いか

中には悪意のあるコードが仕込まれているプラグインも存在します。
できるだけ公式サイトで公開されているものか、多くの開発者に使われているものを利用しましょう。
「脆弱」「不具合」「バグ」などの単語でと組み合わせて検索すると、そのプラグインのセキュリティ面に関する情報が得られる場合もあります。

3.保守性、相互性は良いか

WordPress本体はバージョンアップされていきます。
基本的な構造は変わりませんが、中にはバージョンアップで使用できなくなってしまうプラグインもあります。

そんな時に、プラグインの開発者がサポートを直ぐに行ってくれそうか(過去にも定期的にバージョンアップされていたり、ソーシャルメディアでアクティブかどうか)という点や、バージョンアップでそのプラグインが使用できなくなった場合の影響範囲もリスクとして把握しておきましょう。

4.プラグインは入れすぎず、定期的に削除すること

WordPressのデメリットの一つは、多機能なためサイトが重くなりやすい点です。この問題はエックスサーバーなどスペックが高いサーバーを選ぶことでカバーすることが可能ですが、不要なプラグインは入れないようにしましょう。
また、使用しないプラグインでもセキュリティホールになる可能性があるため、定期的にプラグインを見直して削除するようにしましょう。

5.定期的にバックアップをとること

プラグインの中でも、サーバーの設定に影響するものなど、影響範囲の大きいものもあります。万が一に備え、定期的にバックアップファイルを作るようにしましょう。
先ほどご紹介したBackWPupの他にも、サーバー自体にバックアップサービスがあるエックスサーバーを使ったり、有料のバックアップサービスを使うのも手です。

終わりに

いかがでしたでしょうか。
これからWordPressでサイトを作る方や、すでにサイトをお持ちの方も、ぜひ活用頂ければ幸いです。

特に保守性・入れる数については、よく参考にされると良いと思います。
プラグインダウンロード時に出る「最近の更新」が近ければそれだけでも最近まで対応してくれているという指標になるし、逆に数年更新されていないものは避けるべきです。

また、プラグインを入れ過ぎるとサイトの鈍化や、アップデート時の対応が大変になるので、出来る限り絞る事も重要になる。

WordPressカスタマイズの練習に。シンプルさと使い勝手を追求したテーマ「Simplicity」

個人的によく確認するWeb系情報ブログ、寝ログさんが公開している、シンプルなWordPressテーマがあるので共有します。
Simplicity

見栄え重視の物が多いテーマの中で、「使い手の分かりやすさ」を追求したテーマです。元々シンプル故、自分好みに染めていけます。WordPressの仕組みやちょっと本格的なカスタマイズを学ぶのに最適です。
「とりあえず練習したい!」「ダウンロードしたテーマが複雑すぎてわけわからない」という方は、とりあえず試してみるといいかもしれません。

その上で、実際の使用に耐えられるSEOへの配慮や、SNSの連動補助も完備しているので、十分実用出来るテーマになっています。

※公式からのインストールができないので、上記サイトでダウンロードの後、外観→新規追加→アップロードからzipファイルを選択してアップロードしてください
通常版と2があります。どっちでもいいですが、2の方がWordPressの新仕様に対応していくものと思われます。

php覗いてみたら意外と複雑でした。明日、その辺を踏まえて講義していきます。

classや変数のネーミングに悩んだら――便利ツール「codic」

Web制作をしていく上で、避けられないのがID、classや、プログラミングの変数などの命名作業。
よく使う「wrapper」や「main」だけで済めばいいですが、そうもいかないのが実情。かといって、スッと出てこない英単語は多いし、分かりにくい名前を付け過ぎるとあとで自分の首を絞めることにもなりかねない……
そんな時に便利なWebサービス「codic」が紹介されていたので、共有します。

紹介元(詳しい使い方)関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも

日本語で名前を打ち込むと、英単語になって帰ってきます。複数の単語の接続方法も好みに選択可。
かなり多くの単語に対応しており、使い勝手はバッチリです。会員登録するとさらに機能が増えるようですが、ざっと使った感じでは未登録でも問題なさそうです。
今後対応単語数も増えると思われるので、ぜひ使ってみてください。

ファビコンの設定

グループワークもそろそろ佳境です。
完成が近づいてきて、なんとなく皆気になっていそうなのが「ファビコン」の設定です。
今回は講義で紹介し損ねたファビコンの設定方法を紹介します。

ファビコンって何?

ファビコンはタブの左側(titleの横)に出ている小さいアイコンの事。
デフォルトだと味気ない事もあり、多くのサイトで設定されています。

設定方法は、

  1. 画像を用意
  2. .icoファイルに変換
  3. headタグ内に書き込む

これだけです。

画像を用意!

まず重要なのは画像のサイズ。16px×16px、ないし32px×32pxで制作します。
ショートカットアイコンとして使われる事もあるので、32×32が無難です。
イラレなどを使ってかわいい素材を作ってみましょう。
作った素材は一度png等で保存します。

.icoに変換!

次に、作った素材を.icoファイルに変換します。
といっても、難しいことは特にありません。
ファビコン favicon.icoを作ろう!
上記リンクのようなサービスが幾つかあるので、画像を選択してボタンを押すだけでicoファイルが出来上がります。

headに張り付け!

最後に、headタグの中に張り付けて完成です。

<link rel="shortcut icon" href="[icoファイル]" />

hrefの中身は、作った素材までの相対パスになります。
サーバーにあげる場合はきちんと一緒にアップロードする必要があるので、作業フォルダ内に保存しておきましょう。

参考:無料ですぐできるfaviconの作成と設置のしかた

グループワークに関して。時間がなければ設定する必要はありません。完成最優先で、もし余裕があればやってみてください