このブログでは外部リンク指定した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で属性セレクタを使い、擬似要素で表示ですね。ただ、17行目ではドメインを直接指定しているのでハードコーディングになります。オリジナルのWordPressテーマ制作であればこれで十分なのですが、使い回したいときは毎度書き換える必要があったり、販売用にWordPressテーマを作成する場合は厄介です。なのでこれを解決してみます。wp_add_inline_style()でサクッと正直解決策は考えればいくつかあります…。が、これが一番適切かなぁと思ったやり方を示してみます。PHP側でWebサイトのドメインを取得し、wp_add_inline_style()を使ってスタイルと一緒に吐き出す方法です。<?phpfunction 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を読み込んでいること前提だとか、バーティカルリズム用の設定変数で変わってきたりだとかするので、サイトに合わせた形に修正してみてください(ほぼ自分用という)。