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

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

phpinfo.php

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

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

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

急げ!仮想通貨のAirdrop!2018/9/30まで

以前案内したポイントサイトの「すぐたま」ですが、
仮想通貨のAirdropを9/30まで行ってます。

締め切りまで残り数日しかありませんが、登録だけで
もらえるので、もし仮想通貨に興味がある方は急いで!

ノーリスク、ノーコストでいくらの価値がつくかは
わからないAirdropですが、マイナスになることはないので、
とりあえず登録するだけでもらえるのでお手軽で簡単な
案件です。

ここから登録するだけで1,000XBMもらえます!

9月末まで!仮想通貨ビットマイル無料配布中!

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です。

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


サーバー移行時のURL確認

新しいサーバーに引っ越しした際、URLが同じなので
新サーバーできちんと表示ができるかどうかを確認したい際
以下の方法で確認することが出来ます。
(今回はWinで確認したのでMacでした際には追記します)

まずはメモ帳を管理者として開きます。
(hostsファイルを変更するには管理者権限がないと変更できないため
ここ重要です!)

開くから以下の場所のすべてのファイルよりhostsファイルを開きます。
「C:」→「¥Windows」→「¥System32」→「¥drivers」→「¥etc」

開いたファイルの一番下の行にサーバーに記載のあるIP番号と
ドメインを以下のように記載して上書き保存してブラウザで
URLをリロードしてみると新しいサーバーでのURLが確認できます。

123.456.789.123 www.○○○.com
123.456.789.123 ○○○.com

旧サーバーに戻りたいときは旧サーバーのIPを入れて上書き保存して
ブラウザをリロードすればOKです。
PC2台あれば、旧サーバーと新サーバーの状態を
確認することが出来ます。

サーバー移管ってなかなか大変ですよね、、、
最後に追加したIP情報は確認が終わったら削除をお勧めします。

スマホのhover

最近はモバイルファーストでスマホ対応のサイトがほとんどです。

スマホ用のサイトを作成する方法とレスポンシブサイトとして
スマートフォンもPCも同じページのレイアウトを変更して
見せ方を変える方法とで対応してるサイトがあります。

今回はBootstrapのレスポンシブでカルーセルを利用して
スライダー表示をしていたのですが、インジゲーターが
iPhoneでクリック出来ないということで、いろいろと
検索して設定を変えてみましたがうまくいかず、
結局スライダーをスマホ対応の物に変更しました。
ただ以下の記述にて対応できるものもあるかと
思ったので覚書として残します。

「ontouchstart属性を追加する」
これだけで大丈夫でした。

特にjQueryも不要でスマホでクリックができるようになります。
bodyタグに入れても良いですし、クリックしたいdivに入れても
良いしプロパティは空で大丈夫です。

書き方の例は以下となります。
<div ontouchstart=”” >クリック内容</div>


固定したナビにスクロールをつける応急処置

ヘッダーを固定してハンバーガーメニューをつけると
長いメニューの場合は下の方に記載されているメニューが
表示されないということも、、、

そこで作り方を変更したほうが良い時もありますが、
時間がない場合はスクロールをつける方法。

表示する子要素に高さをheight:100vhなどつけてあげて
以下を追加すると見えない範囲がある場合は
スクロールできるようになります。
overflow: auto;
-webkit-overflow-scrolling: touch;

ただ下に表示されている画面がスクロールされるなどの
細かい設定が別途必用な際も多いと思いますが、
とりあえずの応急処置は上記で対応できるかと思います。
ただし、スマートフォンでの挙動はイマイチなので
根本的な問題解決にはならない可能性もありますが、、、

SVG作成 アンドロイドで表示できない場合

pngファイルをsvgに変換する作業を行ったのですが
サイト上からの変換だときれいなSVGが作成できず
illustratorで作業しても、結局ベクター画像でないので
綺麗に変換できず、Photoshopを利用してみたところ
見た感じきれいだったのでサイトに利用したところ、
アンドロイドで表示できないという壁にぶつかり、、、

どうやらPhotoshopで変換したSVGではアンドロイドでは
表示できないようです。
(詳細はこちらのサイトにて記載されている記事で知りました)

そこで作ったSVGをillustratorで保存すると確かに表示されますが
pngと同じ荒い画像になってしまいます。
(どうやらPhotoshopで作成したSVGもベクター画像ではないので
拡大すると荒くなってしまうようで、、、)

結局はillustratorで作り直すのが早そうですが、もし何か
良い方法があればお知らせいただけると助かります。

アンドロイドでsvgが表示できない!というかたは、もしかして
Photoshopを利用してませんか?
illustratorで保存しなおすと利用できますので、ベクター画像であれば
レスポンシブやretinaディスプレイ等々にも対応できるかと思います。

Bootstrap4 ハンバーガーメニューをクリックすると閉じる

Bootsrapというフレームワークで使っている方も多いかと思います。

ハンバーガーメニューもついており、テンプレートを使えば
「あっ」という間にサイトが作れてしまいます。

ただいろいろと便利な反面、カスタマイズするには
少し知識が必要だったりします。

そのまま使うとハンバーガーメニューはアイコンをクリックしないと
閉じない設定になっています。

そこでハンバーガーメニューを開いた際に、メニュー項目を
クリックしたら閉じるという簡単なコードです。
こちらのサイトに記載されていたのを転記させていただきます。
(詳細はリンク先のサイトをご確認ください)

こちらのコードで無事にBootstrap4のハンバーガーメニューも
メニュー内の項目をクリックして閉じることが出来ました!

$(document).ready(function () {
$(“.navbar-nav li a”).click(function(event) {
$(“.navbar-collapse”).collapse(‘hide’);
});
});