SANGOの関連記事(横長)をカスタマイズしてページ回遊率を上げる!

SANGO ショートコード 関連記事(横長)

この記事では、下記のことができるようになります。

できるようになること

  • SANGO 関連記事(横長)のカスタマイズができます。
  • 親テーマを修正する方法と、新規で追加する方法がわかります。
  • ショートコードを追加する方法がわかります。
  • AddQuicktagでショートコードを追加する方法がわかります。
  • 関連記事(横長)のクリック率があがります。

before

共感力 理解共感力とは?相手を理解し、好奇心を持つ”共感力”でコミュニケーションを楽にする!

after

CHECK共感力 理解共感力とは?相手を理解し、好奇心を持つ”共感力”でコミュニケーションを楽にする!
注意
この記事ではfunction.phpとstyle.cssを修正します。

特にfunction.phpの修正は失敗するとページが真っ白になる可能性があります。

必ずバックアップを取得するようにお願い致します。

1. 親テーマを修正する方法

こちらのカスタマイズ方法は、親テーマを修正して、過去追加した関連記事(横長)にも修正を適用する方法です。

ただし、SANGOのバージョン等で修正が消える可能性もあるため、修正は自己責任でお願いします。

1-1. style-shortcode.phpに追加

style-shortcode.phpにこちらを追加します。

ファイルのある階層はこちらです⇒library/functions/style-shortcode.php

style-shortcode.php
 /*********************
 * 関連記事リンク(シンプル)
 *********************/
if (!function_exists('sng_entry_link')) {
  function sng_entry_link($atts)
  {
    $output = '';
    $ids = isset($atts['id']) ? explode(',', $atts['id']) : null;
    if(!$ids) return "";
    $target = isset($atts['target']) ? ' target="_blank"' : "";
    $is_date = isset($atts['is_date']) && $atts['is_date'];

    foreach ($ids as $eachid) {
      list($url, $title, $img, $date) = sng_get_entry_link_data($eachid, 'thumb-160', $is_date);
      if ($url && $title) {
        $output .= <<<EOF
<span class="kanren__title dfont">CHECK</span><a class="linkto table" href="{$url}"{$target}><span class="tbcell tbimg">{$img}</span><span class="tbcell tbtext">{$date}{$title}</span></a>
EOF;
      }
    } // endforeach
    return $output;
  }
}// END get_entry_link

赤文字箇所を追加します。

1-2. style.cssに追加

CSSに下記を追加します。

style.css

/* 関連記事の上に出る文字 */
.kanren__title {
  display: inline-block;
  position: relative;
  padding: 0 25px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
  margin-left: 10px;
  background: #FFFFFF;
}
.kanren__title:before,
.kanren__title:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #252525;
  content: "";
}
.kanren__title:before {
  left: 0;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.kanren__title:after {
  right: 0;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
/* 関連記事(横長)のとCHECKの距離を短くして、画像位置を右にずらす。 */
.linkto {
  margin: -0.65em 0 1.5em;
  padding: 10px 10px 10px 20px;
}

2. 子テーマに新規追加する方法

こちらのカスタマイズ方法は、新規でショートコードを追加して関連記事(横長)と組み合わせます。

したがって、過去の関連記事(横長)に対しては修正が反映されないカスタマイズ方法です。

2-1. function.phpに追加

function.phpにこちらを追加します。

function.php
*************************************************
  CHECKのショートコード追加
**************************************************/
// [check title="CHECK"][/check]
add_shortcode('check', function( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'title' => 'CHECK'
    ), $atts));
	
	$title = '<span class="kanren__title dfont"> ' . esc_attr($title) . '</span>';	
    return $title;
});

この追加を実施することで、ショートコードが使えるようになります。

ショートコード
[check title="CHECK"][/check]

2-2. style.cssに追加

CSSに下記を追加します。

style.css

/* 関連記事の上に出る文字 */
.kanren__title {
  display: inline-block;
  position: relative;
  padding: 0 25px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
  margin-left: 10px;
  background: #FFFFFF;
}
.kanren__title:before,
.kanren__title:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #252525;
  content: "";
}
.kanren__title:before {
  left: 0;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.kanren__title:after {
  right: 0;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
/* 関連記事(横長)のとCHECKの距離を短くして、画像位置を右にずらす。 */
.linkto {
  margin: -0.65em 0 1.5em;
  padding: 10px 10px 10px 20px;
}

2-3. AddQuicktagでショートコードを追加する

AddQuicktagは、ショートコードをプルダウンで選択できるようにするプラグインです。

SANGO ショートコード 関連記事(横長)

2-4. 有効化して設定を行う

カスタマイズが完了したショートコードをAddQuicktagで使用できるようにします。

SANGO ショートコード 関連記事(横長)

AddQuicktagを使用することで、簡単に投稿にショートコードを追加できるので、おすすめです。

3. カスタマイズ後のショートコード

関連記事(横長)はすでにショートコードが存在しています。

既存の親ファイルに修正を入れる場合は例外ですが、今回の新規で追加するカスタマイズは、ショートコードにショートコードを組み合わせる形で実装します。

4-1. 元の関連記事(横長) ショートコード

ショートコード
[kanren id="ID"]

関連記事の横長のショートコードは、SANGOデフォルトのこちらを使用します。

4-2. カスタマイズ後の関連記事(横長) ショートコード

ショートコード
[check title="CHECK"][/check][kanren id="ID"]

今回のカスタマイズは、単にショートコードをアップデートする形でカスタマイズします。

したがって、過去に埋め込んでいる関連記事(横長)が同様に修正されるわけではないです。

1-3. 参考

今回ショートコードに追加するテキストは、シェアボタン上部のテキストです。

元テキスト

SHARE

追加テキスト

CHECK

 

SANGO ショートコード 関連記事(横長)

5. まとめ

CSSの修正を行ったあとは、キャッシュを削除するか、「ctrl + F5」でスーパーリロードをして確認しましょう。

function.phpに対しての修正は大変危険な作業です。

間違えてしまっても大丈夫なように、バックアップは必ず取得するようにしてください。