クライアント側でCSSを反映したリンク・画像リンクを設定する方法 - 岡山・広島の広告パートナー　ヤマト広告ブログリレー

f:id:yamato-ugaki:20160330183741j:plain

こんにちは！
ユーザー視点からのUIを気にかけられる
制作になりたい宇垣です。

今回はとあるクライアント様の為に初めて
関数を自作したのでそのメモ書きを。

WordPressでお客様にブログなどを
更新していただいているのですが、
HTML慣れしていない方も多く、
おそらくビジュアルエディタで書かれているはず。

その場合に、記事にリンクを貼ろうとすれば
特にこちらから＜a＞タグ自体にCSSを指定していない限り
このようなテキストリンクが限界だと思います。

f:id:yamato-ugaki:20160330174233p:plain

しかし、サイトを通して共通でこのような
CSSを反映したリンクを貼りたい。

f:id:yamato-ugaki:20160330174247p:plain

borderを指定したり、WEBアイコンをつけたり、
（ちなみにWEBアイコンはabsolute指定になっています）

この場合、＜a＞タグという大きなククリに
CSSを適用させるとなると他のタグにも影響がでてくるので
できたらクラス名をつけて欲しい。

しかし、ビジュアルエディタで書いている方に
「テキスト」モードに変更して

『＜a 』と　『href=""』の間に
『 class="link_style"』を追加してくださいね！

または

『＜a class="link_style" href="URL" target="_blank">詳しくはこちら＜/a>』

『＜a class="link_style" href="URL">＜img class="" src="themes/theme/images/link_btn.gif" alt="詳しくはこちら" target="_blank" width="150" height="50">＜/a>』

をコピペして使って下さい。

なんて不便すぎて使えません。

ということで、お客様がビジュアルエディタのまま
HTMLを書くことなくこのようなリンクを貼れるような
関数を制作しました。

リンクボタンのHTMLをショートコード化する

今回やったのは戻り値としてクラス名がついた＜a＞タグを返してくるような関数を制作しました。
もちろん、毎回リンク先URLは指定するので、ショートコードを通してのデータの引き渡しも必要です。

リンクに画像を使わない場合

// 記事の詳しくはこちらボタン
function ymt_link( $atts) {
	extract(shortcode_atts(array(
		'link' => ''
	), $atts));
	                
	$res = '';
	$res .= '<a class="link_style" href="' . $link .'" target="blank">詳しくはこちら</a>';
	return $res;
}
add_shortcode('ymt_linkbtn', 'ymt_link');

.link_style {
    background-color: #fff;
    padding: 3px 35px 3px 15px;
    border: 1px solid #F69;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    margin-bottom: 5px;
}
.link_style i {
    position: absolute;
    font-size: 1.2em;
    width: auto;
    height: 18px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 10px;
}

こちらを適用すると、
[ymt_linkbtn link="http://yamato-agency.com/"]
という記載で上記デザインのリンク表示ができるようになります。

f:id:yamato-ugaki:20160330174247p:plain

link=""の中を書き換えるとリンク先が変わります。

これならビジュアルエディタで記載してもタグとして出力されるので
HTMLに明るくない方でもコピペだけでCSSのきいたリンクが使えます！

リンクに画像を使いたい場合

例えばこのような詳しくはこちらボタン。

f:id:yamato-ugaki:20160330182759p:plain

リンクボタン自体を画像するにしろ、矢印アイコンなどで画像を使用するにしろ、画像を使用する場合はディレクトリまでのパスを取得します。
function.phpに絶対パスで画像までのパスを記述するのは簡単ですが、その場合ドメインが変わった時にリンク切れを起こしますのであまり良策とは思えません…。

// 記事の詳しくはこちらボタン
function ymt_link( $atts) {
	extract(shortcode_atts(array(
		'link' => ''
	), $atts));
                
	$img_path = get_bloginfo( 'template_directory' );
	$res = '';
	$res .= '<a class="link_img" href="' . $link .'" target="blank">';
	$res .= '<img src="' . $img_path . '/images/link_btn.gif" alt="詳しくはこちら" width="150" height="50">';
	$res .= '</a>';
	return $res;
}
add_shortcode('ymt_linkbtn', 'ymt_link');

$img_path　でディレクトリまでのURLは取得できるので、あとは画像までのパスは各自設定してください。

行を分ける必要はないのかもしれませんが長いと見づらいので
私は区切りごとに分けたい派です。

こちらも同じく、
[ymt_linkbtn link="http://yamato-agency.com/"]
でリンク先を指定して出力することができます。