指定したページでメイン画像を切り替える

トップページのメインビジュアルとは別に、それぞれの内部ページに対して、違うメイン画像を表示させたい場合があるかと思います。

wordpressなどでは、phpの条件分岐でページ単位にコンテンツを表示させたりできますが、

静的なhtmlやショッピングサイト構築のサービスなどの条件で、指定したページでメイン画像を切り替えたい場合、

urlで条件分岐させて、動的に画像を切り替えることが可能です。

上では「head-image」に対してそれぞれのurlに対して画像が挿入され切り替えるようになっており、
それ以外のページでは、else ifで「display=”none”」を当てて表示されないようになっています。

また、背景色なども指定できるので、ページごとの装飾も可能です。

hrのデザイン

hr要素をCSS3でいろいろなデザインに装飾する方法です。
画像を使わないため、画像のスライスや読み込みも早くなるので、使用場面によって便利な技です。

両端が細い罫線のデザイン

半透明のグラデーションを使用した罫線はrgbaを使用することで可能です。

hrにはドロップシャドウをつけることもできます。

画像を使わないで罫線をスタイリングできれば、ページごとにスライスしなおしたり、デザインの修正が来た場合でもすぐに対応できるので、こういった装飾部分はcssで行っていきたいですね。

WordPress Visual Icon Fonts

Font Awesomeのアイコンフォントは、便利で拡大しても表示がきれいなままなので、いろいろなサイトなどでよく利用されているのを見かけます。

アイコンののデザインを画像で作成したり、フリー素材を配布しているサイトからダウンロードする手間を省けます。
ブログの見出しやメニューのアクセントとして利用するとよいでしょう。

プラグインのインストールページから「 Visual Icon Fonts 」と検索するとダウンロードできます。

投稿などの編集画面に「Icons」というメニュー項目が表示されるので使用したいアイコンを選択して、利用できます。

編集画面ではHTMLの文字列として表示されますが、プレビューなどで確認するとアイコンとして表示されています。

WordPressのURLの自動補完リダイレクトを無効にする

WordPressには存在しないページのURLを指定しても、WordPressが自動で推測して、
ユーザーがアクセスしようとしたURLにリダイレクトする機能があります。

便利な機能ですが、存在しないURLはすべて404ページに飛ばしたい場合無効にする方法です。

例えば、http://○○.com/neなど間違えたurlをユーザーが打ち込んだとしても、自動補完でhttp://○○.com/news-listなど新着情報などにリダイレクトされてしまいます。
便利な機能ですが、間違ったURLでページに飛ばしたくないという人もいるかもしれません。

上記をfunction.phpに記述すると、http://○○.com/neやhttp://○○.com/newなど間違えたURLへアクセスしたとしても、自動補完が機能せず、http://○○.com/news-list
などへはリダイレクトされず、404ページにリダイレクトされるようになります。

Chromeで文字の置換ができる拡張機能「Search and Replace」

dreamweaberなどhtmlの編集ソフトでは、置換できる機能は色々なソフトで実装されています。

ですが、置換機能がブラウザにはありません。

ブラウザはインターネットを閲覧する使い方が多いとは思いますが、wpでのブログ更新で文字を入力する機会も多い人もいるでしょう。

ブログなどやサイト管理で、大量の文章の中からある単語を探して修正する作業をする場合、ブラウザにも置換機能があるほうが便利です。

Search and Replace

Chromeには置換機能を追加する拡張機能があります、それが「Search and Replace」です。

Chrome に Search and Replace をインストールで、画面右上に虫眼鏡アイコンが追加されます。

「Search for」には検索する文字列を入力し、「Replace with」に置換する文字列を入力します。それから「Replace All」を押すと置換したい場所を、プラグインが全置換を行ってくれます。

サイトを閲覧だけする方にとっては不要だとは思いますが、wpのブログ管理者などこの置換機能が役に立つかもしれませんね。

静的HTML内でPHPを動作させる

静的HTMLでサイトを制作し、新着情報やお知らせなど、WordPressの更新機能を利用する場合、

HTML内でphpを動作させる必要があります。

■WordPressのパーマリンク設定で「基本」に設定
静的HTML内にWordPressの新着一覧を表示したりするには、WordPressのパーマンリンク設定を「基本」に設定します。

■静的HTML内でPHPを動作させる設定
.htaccessにコードを追加し、通常のHTMLファイル内でもPHPが動作するように設定します。

さくらインターネットでは.htaccessへの追記と合わせて、以下を記述したphp.cgiをアップロードする必要があります。

■HTML内でWordPressの関数を利用可能にする
PHPを動作させることが可能になりましたので、今度はWordPressの関数を使えるようにします。
HTMLの一番上に、記述します。

あとは通常の WordPress のテンプレートと同じように記述することができますので、
記事の出力や、固定ページを出力することができます。

※固定ページを出力する場合 下記の記述となります。

table 見出しを固定してスクロール

tableの表などで下に長くなる程、見出しの確認などが大変になり、いちいち上まで戻って確認しなければいけないなど、
ユーザー視点からすると、使いにくい表示方法となってしまいます。

そんな時、見出しの部分さえ固定して、項目のみスクロールできるようにしてしまえば、見出しを見ながらすべての項目を見ることができるので、
table自体をスクロールさせるのも有効な手段です。

スマートフォン対応を考えていなかった場合でも、スクロール形式にすることで、少しは見やすく表示させることは可能です。

table 見出しを固定してスクロールさせるためには、
下記のように見出しの部分をthead要素内に記述し、tbodyと分離しておきます。

また、cssにはtbody自体に、スクロールできるようdisplay:block;を指定します。

tableの表示の仕方などは、項目数やPC表示、スマートフォン表示で大きく変わるので難しいものです、なので環境に応じた、最適なテーブルのデザインの設計が大切ですね。

wpの使いやすい管理画面をつくるヒント

更新する人(クライアントやブログ担当者)が使いやすい、更新しやすいと感じるような、
WordPressの管理画面をつくるための方法などを紹介します。

ブログの構成など、サイトによってカスタマイズは様々ですが、
不要なものを削除したり、できるだけシンプルな形にすることで、誰でも見ただけで利用できるようにするのは、大切なことです。

■管理画面に対してCSSやJavaScriptを適用する

管理画面のデザインを見やすい配色やレイアウトにすることで、直感的にわかりやすいレイアウトにできるので便利です。
また、jsを使ってもとからある動きを止めたりなどができます。

管理画面に任意のCSSとJSを適用させる場合、functions.phpに記述します。

■使用しない項目やメニューを表示させない

ダッシュボードや投稿など、利用していない項目などがあると思います。

その項目を非表示にするためには、下記をfunctions.phpに記述します。

利用しやすいUIを作るためには項目を追加や装飾を変更するよりも、不要なものを削除したほうが、知識のない人にとって利用しやすいものとなりますので、
wordpressでは、サイトのデザインだけでなく更新画面のレイアウトにも気を配っていきたいですね。

bxSliderでの問題解決

「bxSlider」は導入が簡単なので比較的簡単に実装が可能なので、使用されていることが多いと思います。

ですが、うまくいかないことがあったりすると解決に時間がかかったりで、複雑でわからないなんて場合に陥ることもあります。

■アニメーションがフリーズ
bx-sliderを使用していてよくある現象ですが、この場合はオプションに

を追加するとフリーズすることが無くなります。

■スマートフォンでのページャーの反応が悪い
スマートフォンでのページャの反応が悪く、タップしても、スライダーが動かない場合があります。

それだと、ユーザーへのレスポンスが悪くなってしまうので、

その場合

jquery.bxslider.jsに対し、

の箇所にに「touchend」のイベントを追加します。

■縦にスワイプした時、スクロールできない

スライダーから縦にスワイプしようとしても、ページをスクロールできない場合があります。その場合は

とbxsliderのオプションに追記してあげることで、スクロールできるようになります。

実装自体は簡単ですが問題が起こった場合、時間を取られることが多いです。なので、オプションやjsの一部分を変更してあげることで、動作を安定させることができるので、対応策は持っておきたいですね。

アイキャッチをドロップで設定できるWordPressプラグイン

Drag & Drop Featured Imageを使用すれば、

wpの更新作業などで、慣れない初心者の方やクライアントにアイキャッチを簡単に設定してもらうことができます。

アイキャッチのアップロードが簡単にできるので、インストールしておくのもありだと思います。

Drag & Drop Featured Image

上記からダウンロードが可能です。

ダウンロードしたファイルをWordPressにインストール、有効化します。

有効化すると、アイキャッチがドロップでアップロードできるように変更されます。

カスタム投稿からのアップロードを可能にするには「外観」かの「Drag & Drop Featured Image」から設定します。

投稿タイプ名の上にon/offボタンで設定が可能です。