Ver1.6 Released !

SANGO Ver1.5 アップデート内容と注意点

SANGO ver1.5コンセプト

2018年7月にSANGO Ver1.5をリリースしました。このページでは、Ver1.5の詳細と留意点をまとめています。テーマのアップデート手順や過去のアップデート内容は、下記のリンク先をご参照ください。

SANGOのテーマ更新情報

1. タイトル下のシェアボタンに「Extend FAB」スタイルを追加


Fada 3


SANGOは、サイト訪問者の学習コストが小さくなるよう、マテリアルデザインを採用しています。2018年5月のマテリアルデザインのガイドラインが改訂によりExtended FABというボタンスタイルが追加されました。

SANGOではこれまでタイトル下に正円形のシェアボタンのみを用意していましたが、Ver1.5のアップデートにて上のような「Extended FAB」スタイルのシェアボタンを選べるように変更しました。

外観 > カスタマイズ > SANGOオリジナル機能の管理 > シェアボタン設定 >「記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する」にチェックを入れることでExtended FABを有効化できます。

子テーマにparts/single/entry-header.phpが入っている方は、以下のように変更を加えてください。


変更を加える行

<label class="fab-btn accent-bc" for="fab"><i class="fa fa-share-alt"></i></label>

変更後

<label class="fab-btn <?php if(get_option('extended_fab')){ echo 'extended-fab main-c'; } else { echo 'accent-bc';} ?>" for="fab"><i class="fa fa-share-alt"></i></label>

2. カスタマイザーの構成を整理


Afda


カスタマイザー(外観 > カスタマイズ)の項目数が増えてカオスになってきたため、今回のアップデートで大幅に整理しました。Ver1.5以降は以下のような構成になります。

新しい構成
サイトの基本設定
┃ ┣ 基本情報とロゴの設定
┃ ┣ デフォルトのサムネイル
┃ ┣ Google Analytics設定
┃ ┣ 背景画像
┃ ┗ パブリッシャー登録
┃
┣ 
┃
┣ デザイン・レイアウト設定
┃ ┣ 記事一覧レイアウト
┃ ┗ フォントサイズ
┃ 
┣ SANGOオリジナル機能
┃ ┣ 記事一覧タブ切替
┃ ┣ モバイルフッター固定メニュー
┃ ┣ ヘッダーお知らせ欄
┃ ┣ フォローボックス(記事下)
┃ ┣ 関連記事(記事下)
┃ ┣ おすすめ記事(記事下)
┃ ┣ CTA(記事下)
┃ ┣ トップへ戻るボタン
┃ ┗ シェアボタン設定
┃
┣ ヘッダーアイキャッチ
┃ ┣ ヘッダーアイキャッチ画像
┃ ┗ 2分割ヘッダーアイキャッチ
┃
┗ 詳細設定

WordPress標準の項目 ┣ メニュー ┣ ウィジェット ┣ ホームページ設定 ┗ 追加CSS

これまでの設定内容はアップデート後もそのまま引き継がれます。

3. モバイルフッター固定メニューのフォローボタンにInstagramを追加


Fada 4


Twitter、Facebook、Feedlyに加えて、Instagramのフォローボタンを追加できるようになりました。

外観 > カスタマイズ > SANGOオリジナル機能の管理 > フォローボックス > InstagramのURL欄に入力されたURLへのリンクボタンとなります。

4. CSSファイルを軽量化

style.cssの見直しをすることで、ファイルサイズを約10KB軽量化をしました。

3.「Scripts To Footer」などのプラグイン対応

これまで「Scripts To Footer」などのJavaScriptリソースの読み込みを遅らせるプラグインを有効化すると、追尾サイドバーなどの一部機能が動かなくなる問題が生じていましたが、今回のアップデートで原因となっていた部分を修正しました。

子テーマにfooter.phpが入っている方は、以下のように変更を加えてください。


変更を加えるコード

<?php footer_nav_menu(); //モバイルフッターメニュー?>
<?php go_top_btn(); //トップへ戻るボタン?>
<?php wp_footer(); ?>

変更後のコード

<?php wp_footer(); ?>
<?php footer_nav_menu(); //モバイルフッターメニュー?>
<?php go_top_btn(); //トップへ戻るボタン?>

4. 特定のタグを持つ記事でのみ表示するショートコードを追加

「特定のカテゴリーに属する記事でのみ表示する」ショートコードのタグバージョンを追加しました。書き方は、以下のようになります。

[onlytag id="タグID"] 表示したいもの[/onlytag]

5. 1カラム用トップページでヘッダーアイキャッチ画像を使えるように

要望が多かったため、今回のアップデートにて対応しました。


その他の変更点
  • 「この記事では広告を非表示」にチェックを入れたときに関連記事広告も非表示になるように
  • 404ページにて吹き出しの三角が上に表示されてしまう問題の解消
  • モバイルで投稿ページを見たときにサイドバーの余白が小さめになる問題を解消
  • iPhoneXでフッター固定メニューのフォローボタンを開いたままスクロールすると、一部が隠れてしまう問題の解消
  • タイムライン・ショートコードの中で、タイトル付きのボックスを使ったときにズレが生じる問題の解消
  • 関連記事ショートコードで、アイキャッチ画像登録無しの記事を表示しようとすると、デフォルトのサムネイル画像にならない問題の解消
  • 表の中にURLなどを入れても折り返すように
  • 固定ページでコメント欄が使えるように
  • 行間をより読みやすい大きさに調整

アップデートの手順について

WordPressテーマ「SANGO」のアップデート手順と注意点

27 Comments

Pon

こんにちは。
SANGOに関する記事以外でも色々わかりやすい記事をご提供いただいてとても感謝しております。
早速ですが、今回のアップデートでは、「希望が多かった」とのことで、1カラム用トップページでヘッダーアイキャッチ画像を使えるようになりましたが、私は逆にヘッダーアイキャッチ画像が表示されるようになって困っているのですが、トップページのみヘッダーアイキャッチ画像を非表示にするにはどうすればよいのでしょうか。

返信する
サルワカくん

そもそもヘッダーアイキャッチ画像は、(カスタマイズしない限り)トップページにのみしか表示されない仕様になっておりますので
外観⇒カスタマイズからヘッダーアイキャッチ画像をオフにすれば良いかと思います。

返信する
あべべ

サルワカさんいつも細かいところに手が届くアップデートありがとうございます。
トップに4つまで表示できるおすすめ記事ですが、アイキャッチ画像を設定しているのに反映されません。
どのように直せばいいでしょうか?

返信する
サルワカくん

そちらPORIPUの機能だと思われます。ちょっとこちらでは管理していないので、原因が分からないですね・・・。

返信する
匿名

アップデートに「固定ページでコメント欄が使えるように」とありますが、どこから設定ができるのでしょうか。

返信する
サルワカくん

固定ページの編集画面にて、
①画面右上の「表示オプション」⇒「ディスカッション」にチェックが入っているか確認
②エディタ下にあるディスカッションの「コメントの投稿を許可」にチェック
これで表示されるようになります。このあたりはWordPressテーマに関わらず共通なので、もし分からなければGoogle検索しても解説記事はたくさんヒットするかと思われます。

ただし、固定ページのテンプレート(page.php)が子テーマフォルダ内に入っている場合は、変更が適用されていない可能性があります。
その場合はまたコメント頂ければと思います。

返信する
せいかん

SANGOを購入しました。
テーマ変更をしたら、記事内に投稿している各画像の下の文が「1行」だけ、画像の右に回り込むようになりました。
横幅いっぱいまで。
なぜなのか、原因はおわかりでしたら、ご教授のほどよろしくお願いいたします。

返信する
サルワカくん

エディタ内の画像と文章がそれぞれpタグで囲まれるべきなのですが(これはSANGOというよりWordPressの仕様です)、1つのpタグの中にまとまって入ってしまっているようです。
エディタの設定などは何かカスタマイズしましたか?
また、エディタ上で画像と文字の間には改行を入れていますか?

それでも治らない場合は、以下のCSSを追加することで、対処することが可能かと思います。

.alignnone {
  display: block;
}
返信する
せいかん

ご返信ありがとうございます。
カスタマイズ内の「自動整形をオフに」のチェックを外したら、直りました!
お手数をおかけしました。m(_ _)m

返信する
D.K

お世話になります。D.Kです。
カテゴリページを作った時の説明に箇所の文章が全部表示されてしまうので、編集の時探したり、編集したりするのが少し気になっております。

この説明の文字数の制限などのカスタマイズ方法はございませんでしょうか?

返信する
サルワカくん

すみません、「説明」の文章がカテゴリーページに全部表示されてしまうのが問題ということですか?
「編集の時探したり、編集したりするのが少し気になる」というのも、恐縮ながら、理解できていないのですが、もう少し詳しく記載いただけますか?

返信する
D.K

お世話になっております。説明が悪くて申し訳ございません。
サルワカさんの言う通り、説明の文章が全て表示されてしまい、画像も表示されてしまいます。

カテゴリのページに普通の記事みたいに入れているので、縦に長くなってしまっています。

お忙しい中申し訳ございません。

返信する
サルワカくん

情報ありがとうございます。
なるほど・・・。
それを一部だけ表示するようにしておいて「続きを表示する」ボタンを設置したいイメージでしょうか?

返信する
D.K

お世話になっております。続きを表示するボタンがあると嬉しいです。
他のテンプレのこと出したくありませんが、他のテンプレのカテゴリ説明欄のところだと、60文字ぐらいを超えたら「テスト・テスト…」と省略されています。

SANGOのカテゴリ説明欄のところは全文表示されているといった感じです。

何卒よろしくお願いたします。

サルワカくん

一応、確認したいのですが、省略で良いのであれば、そもそも説明欄に記載する文章を60文字程度に抑えるので良いのではないでしょうか。
説明欄はその他の部分で表示されないと思うので。

D.K

お世話になっております。カテゴリページの評価を上げるために、カテゴリページも作り込んでいるので、60文字で抑えることは難しいです。

3000文字以上入ってしまっています…
何卒よろしくお願いたします。

返信する
サルワカくん

あ、もしかして、ダッシュボード内の「カテゴリー一覧」ページ(投稿>カテゴリー)に表示されている文章のことですか?
名前 | 説明 | スラッグ | カウント
と表示されているテーブルの「説明」の部分のことですか?

その部分はテーマとは基本的には紐付いておらず、基本的にどのテーマもWordPressの標準仕様をそのまま活かす形だと思うのですが…。
60字以上になると自動で省略されるというのは、どちらのテンプレートでしょうか。
また、画面右上の「表示オプション」で「説明」のチェックを外せば非表示になります(このあたりもWordPressの標準仕様です)。

返信する
D.K

お世話になっております。私の説明不十分で申し訳ございません。
まさにその通りでございます。

自動で省略されるテンプレートはアフィンガーになります。

表示オプションで変えれること…全く知りませんでした…
申し訳ございません。表示オプションで消せることができました。

お忙しい中申し訳ございませんでした。ありがとうございます。

返信する
mak

はじめまして。この度SANGOを導入させていただきました。使いやすくてとても助かっています。

一点質問させて下さい。
人気記事ウィジェットはカスタム投稿タイプも含まれるようになっている、とのことですが、逆に含まれないようにすることは可能でしょうか?
どうぞよろしくお願いいたします。

返信する
サルワカくん

少し長いですが、以下のコードを子テーマのfunctions.phpに追加して頂けますか?
(人気記事の関数をオーバーライドしています)

//人気記事ウィジェットをオーバーライド
class newMyPopularPosts extends WP_Widget {
  function __construct() {
      parent::__construct(false, $name = '人気記事');
    }
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters( 'widget_title', $instance['title'] );
        $entry_num = apply_filters( 'widget_body', $instance['count'] );
        $show_num = apply_filters( 'widget_checkbox', $instance['show_num'] );
        $show_views = apply_filters( 'widget_checkbox', $instance['show_views'] );
        //以下出力されるHTML
      ?>
        <div class="widget my_popular_posts">
          <?php if ( $title ) echo $before_title . $title . $after_title; ?>
          <?php
            $args = array(
                'post_type'     => 'post',
                'numberposts'   => $entry_num,
                'meta_key'      => 'post_views_count',
                'orderby'       => 'meta_value_num',
                'order'         => 'DESC',
            );
            $pop_posts = get_posts( $args );
            if($pop_posts) : ?>
                <ul class="my-widget<?php if($show_num){$i = 1; echo ' show_num';}?>">
                  <?php foreach( $pop_posts as $post ) : ?>
                  <li><?php  //順位
                        if($show_num){ echo '<span class="rank dfont accent-bc">'.$i.'</span>'; $i++;} ?><a href="<?php echo get_permalink($post->ID); ?>">
                        <?php if(get_the_post_thumbnail($post->ID)): ?><figure class="my-widget__img"><?php echo get_the_post_thumbnail($post->ID, 'thumb-160'); ?></figure><?php endif; ?>
                        <div class="my-widget__text"><?php echo $post->post_title; ?><?php //views
                        if($show_views) echo '<span class="dfont views">'.get_post_meta($post->ID, 'post_views_count', true).' views</span>'; ?></div>
                      </a></li>
                  <?php endforeach; ?>
                  <?php wp_reset_postdata(); ?>
                </ul>
            <?php endif; ?>
        </div>
      <?php  } //END出力されるHTML

    //人気記事ウィジェットを出力
    function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = strip_tags($new_instance['title']);
      $instance['count'] = $new_instance['count'];
      $instance['show_num'] = $new_instance['show_num'];
      $instance['show_views'] = $new_instance['show_views'];
      return $instance; }

    function form($instance) {
      $title = isset($instance['title']) ? esc_attr($instance['title']) : '';
      $entry_num = isset($instance['count']) ? $instance['count'] : '';
      $show_num = isset($instance['show_num']) ? $instance['show_num'] : '';
      $show_views = isset($instance['show_views']) ? $instance['show_views'] : '';
      ?>
        <p>
          <label for="<?php echo $this->get_field_id('title'); ?>">
          タイトル:
          </label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
           <label for="<?php echo $this->get_field_id('count'); ?>">
           表示する記事数
           </label>
           <input class="tiny-text" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="number" step="1" min="1" value="<?php echo $entry_num; ?>" size="3">
        </p>

        <p>
          <input id="<?php echo $this->get_field_id('show_num'); ?>" name="<?php echo $this->get_field_name('show_num'); ?>" type="checkbox" value="1" <?php checked( $show_num, 1 ); ?>/><label for="<?php echo $this->get_field_id('show_num'); ?>">順位を表示する</label>
        </p>
        <p>
          <input id="<?php echo $this->get_field_id('show_views'); ?>" name="<?php echo $this->get_field_name('show_views'); ?>" type="checkbox" value="1" <?php checked( $show_views, 1 ); ?>/><label for="<?php echo $this->get_field_id('show_views'); ?>">累計閲覧数を表示</label>
        </p>
        <?php
    }
}

function override_popular_widget() {
	unregister_widget('myPopularPosts');
	register_widget('newMyPopularPosts');
}
add_action('widgets_init', 'override_popular_widget',99);
//END 人気記事をオーバーライド

もしかすると一旦「人気記事ウィジェット」が、ウィジェットエリア上から外れてしまうかもしれません。
その場合、お手数をおかけしますが、再度ドラッグして追加して頂く必要があります。

返信する
マクベル

お世話になっております。

カテゴリーに関する質問です。
親カテゴリーと子カテゴリーを作成しました。
親カテゴリーページの投稿記事の一覧が表示される部分の上に子カテゴリーへのリンクが表示されるかと思います。
子カテゴリーにだけ編集で「説明」部分に記事を入れたところ、その内容が親カテゴリーの子カテゴリーにマウスを乗せるとすべて表示されてしまいます。

こちらを改善する方法はありますか?

返信する
サルワカくん

お世話になっております。
おっしゃる通りですね。失礼致しました。
こちら次回のアップデートで修正しますので、現時点での対応として親テーマのlibrary⇒functions.php⇒sng-function.phpの312行目の

$children = wp_list_categories('show_option_none=&echo=0&show_count=0&depth=1&title_li=&child_of=' . $catinfo->cat_ID);

をまるっと以下に置き換え頂けますか?

$children = wp_list_categories('show_option_none=&echo=0&show_count=0&use_desc_for_title=0&depth=1&title_li=&child_of=' . $catinfo->cat_ID);

アップデートで修正するため、親テーマのファイルを直接編集してしまって構いません。
ご確認の程よろしくお願いします。

返信する
no

バージョン1.6が出たようなのでアップデートしようと、アップデートの参考ページを見てやっているのですが
sangoを選んでも右下に削除が表示されていません。
バックアップをとって1.6を上書きしてみようとやってみましたが、すでにインストールしてあると表示されて1.6をインストールできませんでした。

SANGO for UPDATEには削除ボタンが表示されています。
sango本体と子テーマは選んでも削除ボタンがありません。

このような場合はどうやってアップデートすればいいのでしょうか?

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です