クリッカブルマップ(イメージマップ)をレスポンシブ対応にする

あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。

まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。

私が利用しているのはこちらのサイト

他にも同じようなサイトはあるので、ググって使いやすいサイトを利用するのも良いかもしれません。

ではレスポンシブに対応させるには以下のjQueryを利用します。

jQuery RWD Image Maps

使い方はいたって簡単。

まずはjQueryを呼び込んで、上記GitHubよりダウンロードしたjQueryを追加する。

そして以下を追加すればOK!

$(function() {
 $('img[usemap]').rwdImageMaps();
});

レスポンシブ設定はcss等で設定すればOKです。

YouTubeの埋め込み設定

iframeを使う方法

簡単で手軽な方法です。
YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。
こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOKです。

仕様は変更になることもあるのでざっくりとご紹介。

詳細はググると丁寧にキャプチャー画像などを使って丁寧に説明してくれているサイトもあるので参考までに。

iframeのレスポンシブ

iframeのタグをdivで囲みcssで調整することでレスポンシブ対応が可能です。
以下がサンプルコード
※ 「HTML5でサイトをつくろう 」のサイト記事より参照してますので詳しくはサイトをご確認ください。

.クラス名{
 position:relative;
 width:100%;
 paddingtop:56.25%;
}
.クラス名 iframe{
 position:absolute;
 top:0;right:0;
 width:100%;
 height:100%;
}

ifarameのオプション

srcのURLの一番後ろに「?&autoplay=1」を追加すると 自動再生になります。

その他もろもろの設定はこちらに記載してます。

apiを利用する

こちらは埋め込みたい場所に以下のHTMLを設置し、JavaScript で設定する方法。

HTML

<div class="video-area">
 <div id="video"></div>
</div>

JavaScript

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'video', // 埋め込む場所の指定
{
videoId: 'xxxxxx', // YouTubeのvideoIdを入れる
playerVars: {
loop: 0, // ループしない
controls: 1, // コントローラー表示
autoplay: 0, // 自動再生オフ
rel: 0, // オススメ動画を表示させない
showinfo: 1 // タイトル表示
},
events: {
'onReady': onPlayerReady
}
}
);
}

レスポンシブ対応にするなら playerVars に
height: "100%",
width: "100%",

を追加すると簡単に設定できます。
それ以外の設定は先ほど紹介したパラメーターの設定を参照してください。

videoId はYouTubeのURLの語尾にある「watch?v=xxxxxx」の「xxxxxx」部分です。

ボリュームについて

上記 JavaScript の後に以下のコードを追加するとミュートにすることが出来ます。

function onPlayerReady(event) {
event.target.setVolume(0);
}

音量は0-100まで指定できるようです。
ただしスマホはデバイスにに依存するそうなので event.target.mute(); を使うこともできますが、スマホだとミュートを解除できないようなので、どちらを使うべきか、、、という感じではありますが。

サイトによって使い分けると良いかもです。

pxをvwに変換する計算方法

cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。

px÷画面サイズ×100=vw

上記で計算できるようです。
いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったので。

ACFのデイトピッカーの出力フォーマット

ACFのデイトピッカーをいろんな出力フォーマットに変換する方法です。
(ACFとはWordpressでよく使われている、Advanced Custom Fieldsというプラグインの略です)

<?php
$date = date_create(get_field('フィールド名'));
echo date_format($date,'Y/m/d');
?>

上記以外にもいろいろとサイトに合わせて変更してみてください。
(’Y/m/d’の部分をデザインに合わせて変更してみてください)

WordPress 同じページに検索を2つ設置する場合

WordPressでは以下のタグを入れると標準の検索フォームを設置することができます。
<?php get_search_form(); ?>
このタグは下記のようなHTMLになります。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s">検索</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>

上記タグを見るとidが使われているため、同じページに2つ設置するとエラーになります。
そこで下記の方法で設置するとidを使わずに設置することができます。

searchform.phpの設置

カスタマイズでフォームを作ります。
その方法はsearchform.phpというphp作成します。
idを使わずにclassで対応すると複数設置が可能です。
下記が参考例文です。
デザインに合わせてボタンに変更したり、クラスを追加したりして自由に変更できます。

<form role="search" method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="s">検索</label>
<input type="text" placeholder="検索" value="<?php echo get_search_query(); ?>" name="s" />
<input type="submit" class="searchsubmit" value="検索" />
</form>

制作の際、気をつけないといけないことは以下の3点です。

  • formのaction属性にはWordpressのホームURLを設定すること
  • formのmethodはgetにすること
  • inputのname属性をsに設定

searchform.phpを制作すると、タグを記載したHTMLがこちらに置き換わります。

function.phpにて設定する場合

以下のコードを追加すると、検索フォームをHTML5に対応し、idがなくなりclassでの表示になります。
そのため、検索フォームを同じページに複数設置してもエラーになることはありません。

add_theme_support( 'html5', array( 'search-form' ) );

こちらのほうがお手軽で簡単かもしれません。

お好みに応じて使い分けると良いかもしれません。

詳しくは WordPress Codex に記載してますのでご確認ください。

WordPress タイトルタグの挿入方法

WordPressではタイトルタグをfunction.phpに記入します。
うっかりそのことを忘れてheader.phpとfunciotn.phpの両方に記入すると2重で表示されてしまうのでお気をつけください。

function.phpの書き方はとっても簡単。

add_theme_support( ‘title-tag’ );

たったこれだけです。
ただオリジナルでは「ページのタイトル – サイト名」といった形で表示されます。

いろいろとカスタマイズしたい場合は以下のサイトに詳しく記載されているので参考にされてみては?

WordPress title タグの出力

サーバーのPHP情報確認方法

サーバーに以下のファイルを置くとサーバーの
PHP情報が確認できます。
いろんな情報が見れるので、必要な時のための
覚書として。

phpinfo.php

上記のようなphpファイルを用意します。
中身は以下です。
<?
phpinfo();
?>

次に作成したphpファイルをサーバーにupします。
その後、ブラウザで確認すると、ブラウザ上に
情報がずらずらと表示されます。

とっても簡単に、詳細情報を確認できるので
必要な時に利用してみると良いかと思います。

WordPressをSSL化する

GoogleのSSL化標準をうけ、各サイトSSL化に対応する
サイトが増えました。
通常のCMSを入れてないサイトはサーバーの設定で
終わりですが、Wordpressの場合はその他の作業も
必要になってくるので、SSL化した際の手順を記します。

サーバーの設定

サーバーの設定は各サーバーによって異なりますが、
無料のSSLを用意してくれている所が多いのでそれを
利用するのも良いかと思います。
どのサーバーもそれほど難しいことなく、簡単に
設定できるかと思います。

WordPressの設定

まずは設定の一般にあるWordpressのアドレスと
サイトアドレスのhttp://をhttps://に変更します。

なお内部のファイルの変更については.htaccessファイルを
設定してURLを変更する方法とプラグインを利用して
URLを書き換える方法があります。
どちらかを利用するとリンク切れになることもなく
スムーズにページを表示することが出来ると思いますので
使いやすい方を設定すると良いと思います。

.htaccessファイルでURLを変更する

WordPressをインストールしているフォルダ内に
ある .htaccessファイルに以下を追加する。
(URLとインストールしているフォルダが違う場合はURLの
 ある階層のフォルダ内のファイル)


(もともとあった記述)


(以下追加)
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


プラグインを使う方法

WOrdpress内のURLで変更があれば「 Search Regex 」という
プラグインで変換も可能です。
内部リンクの修正が必要な個所があれば利用してみても
良いかと思います。

WordPressに取り込むcsvの作り方

WordPressでcsvフォーマットを取り込む場面が多いと思います。

ただしcsvファイルにはいろいろと注意が必要です。
以下の3点ができているか、確認するとエラーが
少なくなるかと思います。
・テキストは「”」で囲む
・文字コードはUTF-8
・区切りは「,」

では最初にテキストを「”」で囲む方法です。
エクセルの関数を使うと便利です。
別シートに「=””””&【参照するシートとセル】&””””」を入力して
オートフィルを使えばダブルクォーテーション付の
データが作成されます。
ただし、そのままでは数式が入ってるいるので値を選択して
値のみを別シートにコピーしてそのシートを利用します。
ちなみに値の【参照するシートとセル】はシート1のA1セルの
値を取る場合「Sheet1!A1」と記入します。
そこで上書き保存、もしくは別名で保存にしcsvファイルにて
保存します。
csvにて保存する場合は区切りを「,」にて保存してください。

次にエクセルでは文字コードをUTF-8に設定できないのでWindowsでは
メモ帳、もしくはその他UTF-8にて保存できるエディタ
(Terapadなど)もしくはOfficeと互換性のある無料のソフト
Libreなどでも可能です。
対応ソフトで開いて文字コードを変換してcsvファイルにて保存すれば
OKです。

これでエラーの出ないインポートが可能かと思います。

MW WP Formでユーザー情報を表示する方法

アンケートや申込、問い合わせなどに使えるプラグイン
MW WP Formでユーザー情報の表示方法です。
ユーザーの住所などを再度入力してもらわずに
済むので、活用される場合も多いかと思います。

設定方法はは下記をご参照ください。
(たとえばdisplay_nameを表示したい場合)

まずはMW WP Formのフォーム編集内に以下を記入
[mwform_text name=”display_name”]

次にfunction.phpに以下を記入していきます。
//ログインしている場合
if ( is_user_logged_in() ){
function my_mwform_value( $value, $name ) {
if ( $name === ‘display_name’ ) {
$current_user = wp_get_current_user();
$value = $current_user->display_name;
return $value;
}
return $value;
}
nameの値のdisplay_nameをログインしているときに
取得するといったような内容です。
追加したい項目があれば ”if ( $name~” の部分を
追加していきます。

そして最後にフック を記入します。
add_filter( ‘mwform_value_mw-wp-form-xxx’, ‘my_mwform_value’, 10, 2 );
}

xxxの部分にフォームに記載されているフォーム識別子を
入力すればOKです。
(下記図を参考にしてください)

上記場合は19を入力すればOKです。

使えるタグは公式サイトにも記載があります。
他にも詳しいマニュアルが記載されているので
ご検討されている方は公式サイトもご参考に
されてください。