このブログでは外部リンク指定したaタグにCSSでアイコンフォントを表示しております。
当時参考になった記事は『アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス』でした。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>HTMLでアイコンフォント（今回は「Font Awesome」）を読み込み、
a[href^="http://"]:after,
a[href^="https://"]:after {
content: '\f08e;';
font-family: FontAwesome;
color: #333;
margin:0 .3em;
display: inline-block;
vertical-align: bottom;
/* 以下は旧ブラウザ対応用 */
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
/* ドメインを直接指定（ハードコーディングになる） */
a[href^='https://increment-log.com/']:after {
content: none;
}CSSで属性セレクタを使い、擬似要素で表示ですね。ただ、１７行目ではドメインを直接指定しているのでハードコーディングになります。
オリジナルのWordPressテーマ制作であればこれで十分なのですが、使い回したいときは毎度書き換える必要があったり、販売用にWordPressテーマを作成する場合は厄介です。
なのでこれを解決してみます。
wp_add_inline_style()でサクッと
正直解決策は考えればいくつかあります…。が、これが一番適切かなぁと思ったやり方を示してみます。PHP側でWebサイトのドメインを取得し、wp_add_inline_style()を使ってスタイルと一緒に吐き出す方法です。
<?php
function theme_styles_scripts() {
if ( ! is_admin() ) {
// テーマ用CSSをキューに入れる
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
// 内部リンクのみアイコンフォントを表示しないCSSを作成
$custom_css = '.the-content a[href^="' . get_home_url( '/' ) . '"]::after {
content: none;
}';
// テーマ用CSSの後に、上記CSSをインラインで吐き出す
wp_add_inline_style( 'theme-style', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'theme_styles_scripts' );「.the-content」というクラスで囲っていますが、これは適宜変更してみて下さい。
おまけ（Sass&Compassを使ったほぼ自分用）
今回コーディングしたPHPとは別に、Sass&Compassのコードもメモとして残しておきます。記事本文を出力する以下のようなPHPコードに対して、
<div class="the-content">
<?php the_content(); ?>
</div>Sassはこのようにしております。
.the-content {
a {
&[href^="http://"],
&[href^="https://"] {
&::after {
@include inline-block(bottom);
content: $fa-var-external-link;
font-family: FontAwesome;
@include adjust-font-size-to(10px, .5);
text-decoration: none;
margin: 0 .3em;
}
}
&[href$='.jpg'],
&[href$='.png'],
&[href$='.gif'],
&[href$='.svg'],
&[href$='.pdf'] {
&::after {
content: none;
}
}
}
}FontAwesomeのSassを読み込んでいること前提だとか、バーティカルリズム用の設定変数で変わってきたりだとかするので、サイトに合わせた形に修正してみてください（ほぼ自分用という）。