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

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

Ver1.4での機能向上

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

タブ切替

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

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

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

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

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

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

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

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

完成!

以下のショートコードを利用することで、上のようにタイムライン形式で手順などを解説することができるようになりました。画像などを挿入することももちろん可能です。なお、ショートコード内のlabelやtitleは任意指定です。空欄にした項目は表示されません。

STEP.1
タイトル1
中身1
STEP.2
タイトル2
中身2
STEP.3
タイトル3
中身3
STEP.4
タイトル4
中身4
STEP.5
タイトル5
中身5

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

以下のショートコードを挿入することで、上のような日付入りの関連記事カードを記事内に表示することができるようになりました。PC表示の場合には横長で、モバイル表示の場合には画像と記事タイトルが縦に並ぶ、レスポンシブタイプのカードです。


なお、

というショートコードを使えば、記事内の好きな位置に、このカードタイプの新着記事一覧を表示することができます。

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

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

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

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

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

サルワカくん

こんにちは

外観⇒カスタマイズ⇒詳細設定からデフォルトの「吹き出し画像」と「名前」を決めておくことができるようになりました。これによりデフォルトの吹き出しを使う場合のショートコードが簡潔になります。例えば、

サルワカくん

こんにちは
と入力すると、上のように表示されます。

名前

のショートコードはこれまで通りに利用できます。

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

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

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

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

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

Ver1.4のアップデートに伴い、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より呼び出されます。

41 COMMENTS

アバター
さかまた凪 2019/01/07

アコーディオンで非表示になっているコンテンツは検索エンジンに認識してもらえるか

SANGO使わせていただいています!アコーディオン機能で折りたたんだコンテンツも、検索エンジンに認識してもらえるのでしょうか? スマホビューのWikipediaのように、項目ごとに全てアコーディオンで折りたたんでもいいなら、そういう使い方をテストしてみたいと考えています。

回答を見る
アバター
tei045 2018/12/20

アコーディオンの色を変更し『+』マークを文頭に持ってきたい

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

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

テーマは最新バージョンだけインストール/アップデートすれば良いのか

こんばんは。 最新バージョンをインストールしていますが、 引用の斜め文字などが変更されていません。 もしかして、過去のアップデートから順番に今の 最新バージョンまでアップデートしないと過去のアップデート内容の 恩恵は得られないという事でしょうか?

回答を見る
アバター
ai 2018/06/24

吹き出しを横いっぱいに広げたい

吹き出し機能について質問します。 吹き出しの本文枠が横幅いっぱいにならず、 文章に合わせて短く表示されてしまいます。 ver1.3.3までは問題なかったのですが、 ver1.4にしてからこの症状になります。 改善策はありますでしょうか?

回答を見る
アバター
ゆうな 2018/06/05

テーマアップロード時にzipファイルをアップロードできない

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

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

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

回答を見る
アバター
BoDISIL 2018/05/19

吹き出し内の文章で句読点が行の一文字目にくる

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

回答を見る
アバター
ちょび 2018/05/14

いつもお世話になっています。SANGOでのコーポレートサイトも完成し、日々更新するのがとても楽しいです。SANGOに感謝です。 さて、今回の1.4バージョンアップ後に、ショートコード[yoko2 responsive]、[BOX]を併用利用している箇所のレイアウトに少し違和感を覚えました。 具体的には ・スマホで閲覧すると、ボックスの枠線が写真画像に重なる。 ・ボックスの上にマージンができた。 も…

回答を見る
アバター
GO 2018/04/29

画像を左右寄せしたときにテキストが回り込まないでほしい

いつもありがとうございます。 今回のアプデで、 >画像を左右寄せした場合に、スマホサイズの画面で、文字が綺麗に回り込まない問題の解消(CSSを変更) ↑これなんですが、スマホは回り込まないで欲しい場合はどうしたらよいでしょうか? (以前のほうが都合がよかったのです。。)

回答を見る
アバター
もりた 2018/04/29

アップデートの内容、素晴らしく感動しています^ ^ 欲しかった機能が追加されていて、とても嬉しいです。 スマホ表示のフォントサイズや見出しの大きさや余白の変更もとっても見やすくなりました。 新機能の手順説明もとても分かりやすく、必要な機能を苦労や問題なくすべて実装できました。 ここまでのアップデートには、いろいろとご苦労されたと思います。 ここまでしていただいた事に感謝しております。 本当にありが…

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

アコーディオンの枠線色を変えたい

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

回答を見る

サルワカくん へ返信する コメントをキャンセル

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。