「THE THOR」の使い方・Q&A | wordpresテーマ

2019年11月24日
2020年3月12日
Wordpress
thethor, twitter, wordpress, ハッシュタグ

使っていて調べたことをQ&Aとしてまとめてみました

1 Twitterのシェアするときの画像を大きくしたい
2 タグに設定しているものをtwitterでハッシュタグをシェアしたい
3 困った1：シンタックスハイライターが崩れる

Twitterのシェアするときの画像を大きくしたい

このようなツイートを

このようにしたい

方法

外観 -> カスタマイズ -> SNS設定[THE] -> OGP設定 -> Twitter Cardの種類を選択 -> Summary with Large Imageカード

タグに設定しているものをtwitterでハッシュタグをシェアしたい

こちらですが、The THORの標準機能としては搭載されておりません。

また、プラグインで探しましたが、自動投稿などは、「WP to Twitter」「Jetpack」「All in One Seo Pac」とかでできるかもしれませんが

何故かツイートボタンに対して反映するプラグインは見つかりませんでした。

そこで自作しました。

子テーマに親テーマのinc -> front -> share_btn.phpをディレクトリごとコピーする

親テーマは更新されるたびにリセットされてしまうので、編集はやめましょう。

コードを追加、変更

以下の2点を追加・変更

追加

タグ一覧から、ハッシュタグのリスト（カンマ区切り）を作成

	/*
    タグからハッシュタグを生成
    . '&amp;hashtags='. $tagListResult . '"
    */
  $tagList = get_the_tags();
  if ( $tagList ) {
    foreach ( $tagList as $tag ) {
      $tagListResult .= $tag->name . ',';
    }
  }

変更

URLのクエリにhashtagsに、上で作成したタグカンマリストをつけると、ツイート時に自動的にハッシュタグとなります。

		if ( !empty($options['twitter']) ) {
			echo '<li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text='. urlencode(the_title("","",0)) .'&amp;'. urlencode(get_permalink()) .'&amp;url='. urlencode(get_permalink()) .'&amp;hashtags='. $tagListResult . '&amp;via=desnote_blog&amp;related=desnote_blog" target="_blank" title="Twitter"></a></li>';
		}

困った1：シンタックスハイライターが崩れる

なぜか改行されずに崩れてしまった。その原因はここ。HTML圧縮機能。

preタグを使っているのに、改行を勝手に圧縮してしまうと、使えなくなってしまう。