クリエイター：コーディング備忘録ブログ – ページ 67 – クリエイター：コーディング備忘録ブログ

WPプラグイン：Single Post Template

2017/2272017/227 admin コメントをする

固定ページにはある、テンプレート設定機能ですが、投稿にも同様の機能が必要になりました。
そんなときに役立ったプラグインがこれ。

「Single Post Template」
https://ja.wordpress.org/plugins/single-post-template/

使用方法：

１．プラグインのインストール＆有効化

２．single.php等を複製して、任意のファイル名に変更してサーバーにアップ　例）single-2.php

３．作成したsingle-2.phpの先頭に下記を記述

<?php
/*
Single Post Template: 任意の名称
*/
?>

「任意の名称」の部分は日本語でも大丈夫です。後で判別しやすい名前に設定しましょう。

後は、投稿記事の作成ページで選択して更新するだけ！

投稿に個別のデザインを当てたいときは、是非使ってみてください。

301リダイレクト

2017/2242017/224 admin コメントをする

サイトのディレクトリやHTMLの名前変更を行った後は、301リダイレクトも忘れずに設定しておきましょう。

下記のWEBツールが便利です。
http://www.htaccesseditor.com/

htaccessファイルをサーバーにアップロード下後には、動作チェックもしてあげましょう。

http://ohotuku.jp/redirect_checker/

ちゃんと設定しておけば、旧URLにアクセスすると404なんて事は無くなります。

さらに、301リダイレクトを設定しておけば、検索エンジンからの評価を引き継ぐことが可能です。

302リダイレクトもありますが、下記のような違いがあります。

301:恒久的な転送
302:一時的な転送

参考：http://viral-community.com/seo/301-redirect-2992/

JS:telリンクをスマホの時だけ有効化

2017/2232017/223 admin コメントをする

レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。

あ、当然jQueryの本体は読み込んでいるものとして書きますので、あしからず。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

で、こんな感じでソースを書きますね。

<p>
お問い合わせ：<span class="tel-link">00-0000-0000</span>
</p>

あとはお好みでcssを書いちゃってください。以上。

twitter,facebook,youtube埋め込み

2017/2232017/223 admin コメントをする

■twitter,facebook,youtube埋め込み方法のリンクまとめ

【1】twitter
・埋め込みタイムラインを使用する
→タイムラインを埋め込む方法 | Twitterヘルプセンター

【2】facebook
・下記ページでURLをいれ、タグを取得し貼り付け
→ページプラグイン – ソーシャルプラグイン｜facebook for developers

【3】YouTube
・埋め込む動画を開き、動画の下にある「共有」から「埋め込みコード」を取得
・タグを貼り付け
→動画と再生リストを埋め込む – YouTube ヘルプ

box-sizing プロパティ

2017/2222017/222 admin コメントをする

■widthなどを%で指定する際に便利なプロパティです。

・box-sizing:border-box;
padding と border の大きさを要素の大きさ含めることができる

例えば、
width:50%のボックスを二つ横に並べる際、ボーダーの大きさなどがボックスの大きさ（width:50%内）に含まれるので、
レスポンシブデザインなどで活用できる。

■参考
box-sizing－CSS3リファレンス

WP:画像パスを短縮

2017/2202017/220 admin コメントをする

固定ページなどに、テーマ内の「images」フォルダにある画像を表示させたい場合に、
パスの指定が無駄に長くなってしまうので、対処方法を調べました。

function imagepassshort($arg) {
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
return $content;
}
add_action('the_content', 'imagepassshort');

書かれていることは単純で、「images/」を「get_bloginfo(‘template_directory’)」に置き換えるよ！と言う事。

ですので、「images/」の部分は、それぞれの環境に合わせて変えてください。

スマホページ離脱率に関する注意点

2017/2202017/220 admin コメントをする

■スマホページで離脱率が高い　→問題点を考える前に注意する事

・スマホページで電話ボタン（自動で通話になるボタン）を設定している場合
→タップすると離脱するので、CVになるものも離脱にカウントされている
→CV数が多く、離脱率が高くなる場合もある。

formタグ inputタグ【html】

2017/2172017/217 admin コメントをする

■formタグ
・action属性とmethod属性を指定する

・action属性
→フォームのデータの送信先(※URI)を指定する
※データを送るサーバーのCGIプログラムのURI

・method属性
→データの転送方法を指定する
→post と getの2種類

■inputタグ

・属性
type=”text” 　　　入力ボックス
type=”password”　入力してテキストが●で表示されるボックス
type=”checkbox”　チェックボックス
type=”radio”　　ラジオボタン　※複数のラジオボタンを１つのグループにするにはおなじname属性をつける
type=”submit”　　送信ボタン

など

<form id="" method="" action="">
<input id="" type="text" name="" value="" />
<input id="" type="radio" name="group" value="" />
<input id="" type="radio" name="group" value="" />
<input id="" type="submit" value="会員登録" />
</form>

参考：
－HTMLタグリファレンス