1.8.6 Released !

SANGO ver1.4で新しく追加された機能とアップデートの注意点

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

SANGOのテーマ更新情報

Ver1.4での機能向上

1. トップページでタブ切替が使えるように

タブ切替

トップページの記事一覧において、特定の「カテゴリーID」もしくは「タグID」の記事一覧へ切り替えることができるタブ機能が利用できるようになりました。例えば「おすすめ記事」というタグがついた記事一覧のタブを設置すること等もできます。詳しくは、下記リンク先をご覧ください。

SANGOのタブ機能 SANGOトップページのタブ切替機能の設定方法まとめ

2. アコーディオン・ショートコードが使えるように

隠したいコンテンツをここに記載

以下のショートコードをエディタの好きな位置に挿入することで、上のようなアコーディオンを使用できるようになりました。

[open title='ここにタイトル']
隠したいコンテンツをここに記載
[/open]

3. タイムライン・ショートコードが使えるように

STEP.1
フタを開ける
カップラーメンのフタを半分だけ空けます。
STEP.2
お湯を注ぐ
うっすらと見える線の位置までお湯を注ぎます。
STEP.3
フタを閉める
お湯を注いだら、フタを閉めます。上に箸などを乗せて開かないようにするのがおすすめです。
STEP.4
3分間待つ

タイマーを3分セットし、じっと待ちます。

完成!
以下のショートコードを利用することで、上のようにタイムライン形式で手順などを解説することができるようになりました。画像などを挿入することももちろん可能です。なお、ショートコード内のlabelやtitleは任意指定です。空欄にした項目は表示されません。
[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[tl label='STEP.4' title='タイトル4'] 中身4 [/tl]
[tl label='STEP.5' title='タイトル5'] 中身5 [/tl]
[/timeline]

4. 日付入りの関連記事カードのショートコードが使えるように

SANGOのショートコード一覧 SANGOのショートコード一覧 以下のショートコードを挿入することで、上のような日付入りの関連記事カードを記事内に表示することができるようになりました。PC表示の場合には横長で、モバイル表示の場合には画像と記事タイトルが縦に並ぶ、レスポンシブタイプのカードです。
[card2 id="カードID"]
なお、[catpost type="card2" num="表示記事数"]というショートコードを使えば、記事内の好きな位置に、このカードタイプの新着記事一覧を表示することができます。

5. カテゴリーページのmeta descriptionを指定できるように

管理画面のカテゴリーの編集ページにおいて、カテゴリーページのmeta descriptionを自由に設定できるようになりました。meta descriptionとは?

6. ビジュアルエディタでメイン/アクセントカラーの文字色を選べるように

ビジュアルエディタ上のドロップダウン「文字のスタイル」でメインカラーアクセントカラーの文字色を選べるようになりました。メインカラーとアクセントカラーの設定に関わらず、ビジュアルエディタ上では、デフォルトの「水色」と「橙色」で表示されることにご注意ください。

7. 吹き出しショートコードのデフォルト画像と名前を設定できるように

サルワカくん

こんにちは
外観⇒カスタマイズ⇒詳細設定からデフォルトの「吹き出し画像」と「名前」を決めておくことができるようになりました。これによりデフォルトの吹き出しを使う場合のショートコードが簡潔になります。例えば、[say]こんにちは[/say]と入力すると、上のように表示されます。[say img="画像URL" name="名前"]〜[/say]のショートコードはこれまで通りに利用できます。

8. フォローボックスがInstagramに対応

instagramボタン 記事下のフォローボックスでInstagramボタンを表示することができるようになりました。設定は他のボタンと同様、外観⇒カスタマイズ⇒フォローボックス(記事下)から行うことができます。

9. ホーム用の固定ページ・テンプレートを作成

これまでは、1カラムのホーム用固定ページ・テンプレートのみがありましたが、2カラム(サイドバーあり)の固定ページ・テンプレートを新たに用意しました。通常の固定ページをトップページに固定した場合と異なり、記事のタイトルは表示されません。また「ヘッダーアイキャッチ画像」および2分割ヘッダーアイキャッチ画像を表示することもできます。 固定ページをホームに固定する方法は、下記のリンク先でまとめました。 SANGOで固定ページをホーム固定する方法まとめ

10. AddQuicktagの新バージョンの配布

Ver1.4のアップデートに伴い、AddQuicktagのインポートファイルをアップデートしました。なお、現在のAddQuicktagのクイックタグは上書きされることにご注意ください。ダウンロードは下記のリンク先からどうぞ。 AddQuicktagで簡単ショートコード挿入 AddQuicktagで簡単にショートコードを挿入しよう

問題点の解消

1. 関連記事や参考リンクのショートコードが分裂してしまう問題の解消

環境に関わらず、この問題が起きないように修正を加えました。

2. アイキャッチ画像の登録がない記事のタイトル下のギザギザ線を実線に変更

タイトルなしの記事

アイキャッチ画像のない投稿ページでは、タイトル下にギザギザ線が表示されていました。SANGOの雰囲気にギザギザ線は馴染んでいなかったため、今更ながら実線へと変更しました。ギザギザ線を非表示にするカスタマイズを行っている場合、実線は表示されません。

以下のCSSを子テーマのstyle.cssに追加してください。
style.css
/*タイトル下の線をギザギザに*/
.nothumb .entry-meta:after,.nothumb .page-title:after { 
  background-image: url(★ここにトップページのURL★/wp-content/themes/sango-theme/library/images/gizagiza.svg);
  bottom: -40px;
  width: 80px;
  height: 11px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}
/*END タイトル下の線をギザギザに*/

↑★ここにトップページのURL★の部分に、サイトのURLを入力してください(例:https://saruwakakun.design/wp-content…)。

以下のCSSを子テーマのstyle.cssに追加してください。
style.css
.nothumb .entry-meta:after, .nothumb .page-title:after {
    content: none;
}

3. 見出しの大きさと余白を微調整

h2〜h4の見出しのフォントサイズをそれぞれ0.1emずつ程、小さくしました。また、余白もわずかに縮小しました。見出しにCSSでカスタマイズを加えている場合は、これらの変更は反映されない場合があります。

4. スマホ表示でのデフォルト本文サイズを少し小さく

スマホ表示でのデフォルト文字サイズを107%から100%へと変更しました。この値は外観⇒カスタマイズ⇒詳細設定より変更できます。

5. iPhone XのHome Indicaterとフッター固定メニューが重ならないように

iOS Safariにおいて、Home Indicater(iPhone X特有の画面下部の黒線)がフッター固定メニューの各項目と重ならないように余白を確保しました。

その他の問題修正
  • YouTube動画のショートコードを使用した際に、動画と前後の文字が詰まらないようにCSSを変更
  • プラグインYARPP対応:記事下の関連記事の関数名を変更
  • トップページ用固定ページでもウィジェットメニューが使えるようにCSSを変更
  • 画像を左右寄せした場合に、スマホサイズの画面で、文字が綺麗に回り込まない問題の解消(CSSを変更)
  • 記事一覧のページネーションで1ページ目へのリンクにpage/1がつかないように関数を変更
  • ショートコードの吹き出しが文字数に応じた幅になるようCSSを変更

変更を加えたファイル&アップデート時の注意点

index.php 重要

トップページのタブ機能を実装するために書き換えを行いました。カスタマイズのためにindex.phpを子テーマに入れている場合、タブ機能を使用するためには、ファイルの削除、もしくはVer1.4に合わせる修正が必要になります。

entry-footer.php 重要

parts/single内のファイルです。関連記事挿入のための関数名を変更しました。

変更前
related_posts()
変更後
output_sng_related_posts()
子テーマでentry-footer.phpをカスタマイズしている場合、子テーマファイル内のrelated_postsという文字列をoutput_sng_related_postsへと書き換えてください。

header.php 重要

iPhoneXのsafe area対応のため、11行目が変更となりました。

変更前
<meta name="viewport" content="width=device-width, initial-scale=1"/>
変更後
<meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover"/>
子テーマにheader.phpが入っている場合は、子テーマのheader.phpにおいて、上記の部分を書き換えて頂くようお願いします。

editor-style.css

ビジュアルエディタ上で文字色をメイン/アクセントカラーに装飾した場合、水色/橙色で表示するように変更しました。

post-grid.php

コードをリファクタリング(整理)しました。前Verまでのコードでも機能するため、子テーマ内でカスタマイズされている場合も修正等は不要です。

functions系ファイル

子テーマでも上書きはされないため、特に対応は不要です。

CSS系ファイル

子テーマでも上書きはされないため、特に対応は不要です。

注意
子テーマ内でindex.php、header.php、entry-footer.phpのいずれかのファイルの編集を行っている場合、修正もしくは子テーマ内の該当ファイルの削除が必要となります。ご迷惑をおかけして申し訳ありませんが、ご理解の程よろしくお願いします。

新しく追加されたファイル

page-forfront2col.php

ホーム用固定ページテンプレート(2カラム・サイドバーあり)です。固定ページ作成時にサイドバーからテンプレートを選ぶことができます。

post-tab.php

トップページのタブ機能を実装するためのものです。index.phpより呼び出されます。

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

61 COMMENTS

さかまた凪 2019/01/07

SANGO使わせていただいています!アコーディオン機能で折りたたんだコンテンツも、検索エンジンに認識してもらえるのでしょうか?

スマホビューのWikipediaのように、項目ごとに全てアコーディオンで折りたたんでもいいなら、そういう使い方をテストしてみたいと考えています。

回答を見る
tei045 2018/12/20

“SANGO”、とても使い易く細部まで考えられているテンプレートで大変気に入っています。
アコーディオンショートコードを使いたいのですが、『使い方ガイド』の『よくある質問』のように、色を変更したり、『+』マークを文頭に持ってくるにはどうすれがよいでしょう?
よろしくお願い致します。

回答を見る
eri 2018/08/09

sangoを大変気に入って使わせていただいています!
あまり詳しくなくて申し訳ないのですが、
当サイトのトップページにページネーションが表示されず、記事も5つまでしか出ません。
どこか問題があるのでしょうか?

回答を見る
キズナアイ 2018/07/08

こんばんは。

最新バージョンをインストールしていますが、
引用の斜め文字などが変更されていません。

もしかして、過去のアップデートから順番に今の
最新バージョンまでアップデートしないと過去のアップデート内容の
恩恵は得られないという事でしょうか?

回答を見る
ai 2018/06/24

吹き出し機能について質問します。

吹き出しの本文枠が横幅いっぱいにならず、
文章に合わせて短く表示されてしまいます。

ver1.3.3までは問題なかったのですが、
ver1.4にしてからこの症状になります。
改善策はありますでしょうか?

回答を見る
ゆうな 2018/06/05

初めまして。いつも愛用させていただいております。

初歩的な質問で大変申し訳ないのですが、1.4.1にアップデートしようと手順通りに進んでみたものの、ZIPファイルの読み込みが出来ずに困っております。
テーマ→新規追加→テーマのアップデート→SANGO-UPDATEファイルを選択しましたが、ファイルが開いてしまいます。
SANGOを購入しアップした時はZIPファイルのまま出来たと記憶しているので、どうすればいいかわからず質問させていただきました。
問い合わせ先が間違っておりましたら申し訳ございません。

回答を見る
おーき 2018/06/04

はじめまして、お世話になります。

タイムラインのショートコード内に、ボックスのショートコード(使用したのはbox 28)やカエレバのカードを置くと、通常のタイムラインなしの状態と比較してスタイルが崩れてしまいます。
【起こっている現象】
・box28のタイトルのラベルが枠からずれて本文と重なる。
・カエレバカードの上側余白が大きくなる、Amazon・楽天などのボタンの文字が下にずれてボタンが大きくなる。

私のサイトだけの現象なのか、一度ご確認頂けませんでしょうか?

回答を見る
ほまれ 2018/06/04

すばらしいテーマのご提供ありがとうございます。。。
難しいとは思うのですが、カテゴリー一覧ページを、
3列並びに変更することはできないでしょうか。

大変お手数になりますが、何卒、よろしくお願い申し上げます。

回答を見る
BoDISIL 2018/05/19

吹き出し内の文章で句読点が行の一文字目にくる現象を改善できませんでしょうか。
記事内は考慮されているようです。

回答を見る
ちょび 2018/05/14

いつもお世話になっています。SANGOでのコーポレートサイトも完成し、日々更新するのがとても楽しいです。SANGOに感謝です。

さて、今回の1.4バージョンアップ後に、ショートコード[yoko2 responsive]、[BOX]を併用利用している箇所のレイアウトに少し違和感を覚えました。

具体的には
・スマホで閲覧すると、ボックスの枠線が写真画像に重なる。
・ボックスの上にマージンができた。

もしかすると、バージョンアップのタイミングで、プラグインをインストールした事もあり、御社側の影響ではないかもしれませんのでその際は申し訳ありません。

回答を見る
スキナレ 2018/05/06

初めまして。
WordPressどころか、何十年前にホームページビルダーを使ったことがある程度のウェブサイト制作初心者で、1ヵ月半前ぐらいからWordPressで右往左往しながらウェブサイト制作を始めました。

いきなり有料テーマのSANGOを購入した位一目惚れで、サルワカさんのサイトをくまなくみながら勉強している最中です。SANGOを含め毎日の生活の中に新たに1つ生きがいを得たような感じです(#^.^#)

さて、Ver1.4にアップデートしたのですが、僕のサイト内の記事で急にサイドバー諸々が消えてしまい困っています。

サポート頂けると嬉しいです。よろしくお願いいたします。(^^ゞ

回答を見る
ai 2018/05/06

アップデートでさらに自分好みにカスタマイズできるので嬉しいです。

1点相談なのですが、MarsEditで記事を更新すると、「この記事では広告を非表示」のチェックマークが外れしまいます。MarsEditとワードプレスの仕様上仕方ないかもしれませんが、これを解決する方法などがあればご教授お願いします。

回答を見る
えあん 2018/04/30

アップデート内容非常に満足しています。

参考リンク(他サイトへのリンクを出力)についての質問です。
ショートコードの記事(
https://saruwakakun.com/sango/shortcode-list)のコメントにて、参考リンクの「参考」を「見る」に変更するやり方を真似して使っていました。
今回のアップデートで、参考リンク(sanko2)が型崩れしてしまったのですが、何か対策方法はありますか?

回答を見る
GO 2018/04/29

いつもありがとうございます。
今回のアプデで、
>画像を左右寄せした場合に、スマホサイズの画面で、文字が綺麗に回り込まない問題の解消(CSSを変更)

↑これなんですが、スマホは回り込まないで欲しい場合はどうしたらよいでしょうか?
(以前のほうが都合がよかったのです。。)

回答を見る
goga 2018/04/29

いつもお世話になっております。
アップデートお疲れ様ですm(__)m
ひと月以上SANGOに触れ、すごく使い勝手がよく気に入っていたところに欲しかったと思っていた機能が追加され、さらにブログが楽しくなりそうです!
ありがとうございます。

1.4を導入し、1点だけ気になる点がありました。
トップページに表示されるカードタイプの記事にカーソルを合わせたとき、アイキャッチ画像の右縁部分がチカチカとするようになったんです。
カードタイプの記事ボックスが浮き上がったときです。
何が原因かさっぱり見当もつかないのです(^_^;)

回答を見る
もりた 2018/04/29

アップデートの内容、素晴らしく感動しています^ ^

欲しかった機能が追加されていて、とても嬉しいです。

スマホ表示のフォントサイズや見出しの大きさや余白の変更もとっても見やすくなりました。

新機能の手順説明もとても分かりやすく、必要な機能を苦労や問題なくすべて実装できました。

ここまでのアップデートには、いろいろとご苦労されたと思います。

ここまでしていただいた事に感謝しております。

本当にありがとうございました。

回答を見る
ブロワー 2018/04/29

アコーディオンで表示される枠線の色を変更したいのですが可能でしょうか?

回答を見る
まさよし 2018/04/28

欲しかった機能が追加されて素晴らしいの一言。
本当にこのテーマ買ってよかったです。

早速タイムラインを活用させて頂いたところ、モバイルで見た際に、横の縦線(|)と思しき銀色の線が一部の文字の上に出現しているのを確認しました。

他の皆さんは問題なく使えていますでしょうか?

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン