Yet Another Related Posts Plugin (YARPP)で自動挿入されるコードを削除する方法
- 公開日 : 2015年10月4日
- カテゴリ : WordPress
数日前に「関連記事を表示させるプラグインYet Another Related Posts Plugin (以下、YARPP)とWordPress Related Postsの比較」のページでも紹介したYARPPを使用すると、head要素内とbody要素にCSSを読み込むためのコードが自動で挿入される。
もう少し厳密に言うと、wp_head()関数とwp_footer()関数を記述した箇所に挿入される。
wp_head()関数の箇所に自動挿入されるコード
wp_head()関数の箇所に挿入されるコードは以下である。
<link rel='stylesheet' id='yarppWidgetCss-css' href='https://www.firstsync.net/wp-content/plugins/yet-another-related-posts-plugin/style/widget.css?ver=4.3.1' type='text/css' media='all' />
上記コードではwidget.cssが読み込まれている。
名前の通りウィジェット機能を使用した際のCSSになると思われますが、このwidget.cssのソースを確認してみると、以下のようになっている。
.yarpp_pro_msg{
border: 1px ridge #D0D0D0;
padding: 0.4em 2em 0.8em;
text-align: justify;
}
.yarpp_pro_msg strong{
display: inline-block;
text-align: center;
width: 100%;
color: orange;
}
.yarpp_help {
position: relative;
display: inline-block;
background: transparent url('../../../../wp-includes/images/wpicons.png') no-repeat -520px -20px;
vertical-align: text-bottom;
width: 20px;
height: 20px;
}
.yarpp_help_msg {
position: absolute;
left: 25px;
display: none;
border: 1px solid #D0D0D0;
width: 250px;
text-align: justify;
padding: 10px 15px;
background-color: #FFF;
box-shadow: 0 0 0.4em -0.15em #333;
z-index: 100;
}
.yarpp_help:hover .yarpp_help_msg{
display: block
}
どうも前半部分はプロ版を使用すると適用されるコードなのでしょうか。
後半部分はヘルプメッセージに適用されるコードだと思われます。(予想)
wp_footer()関数の箇所に自動挿入されるコード
そしてwp_footer()関数の箇所に挿入されるコードは以下になります。
<link rel='stylesheet' id='yarppRelatedCss-css' href='https://www.firstsync.net/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.3.1' type='text/css' media='all' />
こちらではrelated.cssを読み込んでいます。
このrelated.cssのソースも確認してみますと、
.yarpp-related {
margin: 1em 0;
}
.yarpp-related a{
text-decoration: none;
font-weight: bold;
}
.yarpp-related .yarpp-thumbnail-title{
text-align: left;
font-weight: bold;
font-size: 96%;
text-decoration: none;
}
.yarpp-related h3{
font-weight: bold;
padding: 0 0 5px 0;
font-size: 125%;
text-transform: capitalize;
margin: 0;
}
.yarpp-related .yarpp-promote{
clear: both;
background: url(//api.engage.bidsystem.com/adk_mini_logo.png) no-repeat;
float: right;
text-indent: -1000px;
cursor: pointer;
color: #666;
font-size: 11px;
height: 17px;
width: 78px;
}
となっています。
YARPPを使用して関連記事を表示させると<div class=’yarpp-related’></div>が自動的に挿入される。
上記CSSはそのデザインのための記述でしょう。
私のように自分でCSSを書いてデザインしたい人にとっては不要なコードだと言えます。
上記2つを読み込むためのコードをHTML内から削除する方法
さて、上記2つのCSSファイルが必要ないということがわかったので、これらのファイルを読み込むためのコードを出力させない設定をします。
まずwidget.cssを出力させないためにはfunction.php内で、
function my_contact_enqueue_scripts(){
wp_dequeue_style('yarppWidgetCss');
}
add_action('wp_enqueue_scripts', 'my_contact_enqueue_scripts');
と記述する。
参考ページ:関数リファレンス/wp dequeue style – WordPress Codex 日本語版
参考ページ:関数リファレンス/wp enqueue style – WordPress Codex 日本語版
次に、related.cssを削除するためにはfunction.php内に、
function my_contact_enqueue_scripts2(){
wp_dequeue_style('yarppRelatedCss');
}
add_action('get_footer', 'my_contact_enqueue_scripts2');
を記述する。
参考ページ:関数リファレンス/get footer – WordPress Codex 日本語版
これによってwidget.cssとrelated.cssを読み込むための2つのコードは出力されなくなります。