SANGO 3.8.0をリリースしました！

通常であれば2系→3系など大きな変更の場合にのみリリース情報を記事として残しているのですが、今回の3.7から3.8の変更も大きなアップデートになるのでお知らせが必要だと判断し記事を書くことにしました。

今回のリリースでは以下の修正を行なっています！

TwitterアイコンをXアイコンに変更

TwitterアイコンをXアイコンに変更しました。Xが認知されてきましたので、SANGOテーマで、青い鳥さんをXアイコンに変更します。

もし、元の鳥さんに戻したい場合はfunctions.phpに以下のコードを書くことで戻すことができます。

add_filter('sng_social_x', function() {
ob_start();
    ?>
    <li class="tw sns-btn__item">
      <a href="<?php echo sng_get_tweet_url($encoded_url, $encoded_title); ?>" target="_blank" rel="nofollow noopener noreferrer" aria-label="Twitterでシェアする">
        <?php fa_tag("twitter", "twitter", true) ?>
        <span class="share_txt">シェア</span>
      </a>
      <?php if (function_exists('scc_get_share_twitter')) {
          echo '<span class="scc dfont">' . scc_get_share_twitter() . '</span>';
        } 
      ?>
    </li>
    <?php
    $x_icon = ob_get_clean();
    return $x_icon;
  }
}

Xなどでシェアされる際のOGPのイメージを記事ページで調整可能に

Xでシェアされる際のOGPイメージを記事ページで調整可能にしました。

各投稿編集ページの右カラムより設定が可能です！

通常はアイキャッチ画像が使われるのですが、OGPイメージが設定されている場合はそちらが利用されます！

トップページや一覧ページ、記事ページのTwitterカードの種類を選べるように調整

SANGO設定 → 基本設定 でトップページや記事ページがXでシェアされた時のデフォルトのカードタイプが選択できるようになりました！

さらに記事の場合は個別の投稿ページでシェアのされ方を変更することができます。

Xカードの種類を「summary」にすることで小さく、「summary_large_image」にすることで大きく表示されます。

小さな画像でシェアされた時の見た目

大きな画像でシェアされた時の見た目

Xでシェアされた時にどのような見た目になるのか確認するのはこのサイトが便利です

参考

Xのカードのプレビューを確認

mosya – サイトの模写でWeb制作やプログラミングを1から学習するためのオンライン学習サービス

タイトル付きボックスブロックの中のリストブロックの見た目を調整

タイトル付きボックスブロックの中にリストブロックを入れると余白が大きくなってしまうので今回、タイトル付きボックスブロックの中のリストブロックのCSSを調整しています

そのためSANGOではSANGO 3.7.20をリリースして、今後はSANGOリストブロックではなく標準のリストブロックを使っていただけるよう、標準ブロックの機能を拡張いたしました。

具体的な問題

具体的には以下のようにリストを増やそうとEnterキーなどを押すとリスト自体が複製されてしまう挙動となってしまいます。

開発陣はこの挙動を直そうと試みたのですが、WordPress本体のRichText と呼ばれる部品の大幅な仕様変更により、これ以上独自にリストブロックの開発を続けるのは困難と判断しこの度 SANGO リストの機能をそのままリストブロックに移行することにしました。

解決方法

どうしても現在のリストを編集し直す必要がある場合、解決方法としてはSANGO リストを標準のリストブロックに変換していただくのがおすすめです。

以下の画像のようにブロックを選択し、ツールバーより一番左のリストアイコンをクリックし、変換の項目から標準のリストブロックを選択します。

変換後、見た目はある程度保持されますが以下の点にご注意ください

• カスタムCSSやカスタムJSは保持されない
• 各種、カラー設定は保持されない
• 影などの設定は保持されない

今後の推奨カスタマイズ

今後はSANGOリストブロックを使わずに標準のリストブロックをお使いください。エディターに/list と入力することでリストブロックを呼び出すことができます。

標準のリストブロックではいままでSANGOリストブロックで行えていたような以下の機能がご利用いただけるように調整しています。

• リストの各種スタイルを選択する機能
• アイコンや文字、ボックスの色を選択する機能
• リストに影をつける機能

リストのテキスト色やボックスの背景色は以下のタブから編集できます。

以上となります。

この度はご迷惑をおかけして申し訳ありませんでした。

SANGOにはPHPで表示されるHTMLの一部を書き換えられる便利なフィルターフックやアクションフックが用意されています。

この記事ではこれらのフックをご紹介します。

アクションフック

アクションフックを使うことでHTMLを組み立てが行われる途中に処理を挟み込むことができます。

例えば以下のように記事の表示内容を調整できます。

// 関連記事一覧に抜粋文を表示
function customize_sng_entry_link_after_title($id) {
  echo "<p>". get_the_excerpt($id) . "</p>";
}

add_action('sng_entry_link_after_title', 'customize_sng_entry_link_after_title', 10, 3);

sng_before_main_content

記事一覧ページのメインコンテンツの先頭で処理を挟むことができます。

例えば記事一覧ページの先頭にタイトルを表示したい場合などに役に立ちます。

function customize_sng_before_main_content() {
  echo "メインの前に表示される";
}

add_action('sng_before_main_content', 'customize_sng_before_main_content', 10, 3);

sng_version_updated

SANGOのバージョンがアップデートされた際に処理を挟むことができます。

sng_field_side_extra

記事編集画面のカスタムフィールドに項目を追加したい場合に処理を挟むことができます。

以下の記事が参考になります。

2023年2月15日 この記事の監修者を表示するカスタマイズ

sng_update_custom_fields

カスタムフィールドを更新する際に処理を挟むことができます。先ほど紹介したsng_field_side_extra と一緒に使うと便利です。

// カスタムフィールドを保存する際にフィールドを追加
add_action('sng_update_custom_fields', function ($post_id) {
  sng_update_custom_text_fields($post_id, 'post_supervisor');
}, 10, 3);

sng_normal_card_before

記事一覧ページでカードのタイトル前に処理を挟むことができます。

sng_normal_card_after

記事一覧ページでカードのタイトル後に処理を挟むことができます。

sng_entry_link_after_title

以下のような関連ブロックのタイトル後に処理を挟むことができます。

2023年10月19日 SANGOでお気に入り機能を実装する方法

// 関連記事一覧に抜粋文を表示
function customize_sng_entry_link_after_title($id) {
  echo "<p>". get_the_excerpt($id) . "</p>";
}

add_action('sng_entry_link_after_title', 'customize_sng_entry_link_after_title', 10, 3);

sng_card_link_after_title

以下のような記事一覧ブロックのカード型のタイトル後に処理を挟むことができます。

SANGO 3.8.0をリリースしました 2023年11月30日

SANGO リストブロックが非推奨になりました 2023年11月10日

sng_longcard_link_after_title

以下のような記事一覧ブロックのロングカード型のタイトル後に処理を挟むことができます。

2023年11月30日 SANGO 3.8.0をリリースしました

sng_longcard_link_after_title

以下のような記事一覧ブロックのロングカード（半分）型のタイトル後に処理を挟むことができます。

2023年11月30日

SANGO 3.8.0をリリースしました

2023年11月10日

SANGO リストブロックが非推奨になりました

フィルターフック

フィルターフックは表示される既存の内容を書き換えることができるフックです。

sng_archive_title

アーカイブページのタイトルを書き換えられます。

sng_notfound_title

「お探しのページが見つかりませんでした。」を別のメッセージに書き換えられます。

function customize_sng_notfound_title() {
  return '404 Not Found';
}

add_filter('sng_notfound_title', 'customize_sng_notfound_title');

sng_notfound_posts_title

「記事が見つかりませんでした。」を別のメッセージに書き換えられます。

sng_content_block

コンテンツブロックの内容を書き換えられます。

sng_notfound_search

「指定されたキーワードでは記事が見つかりませんでした。別のキーワード、もしくはカテゴリーから記事をお探しください。」を別の内容に書き換えられます。

sng_notfound_archive

「まだ記事が投稿されていません。以下でキーワードやカテゴリーから記事を探すことができます。」を別の内容に書き換えられます。

sng_notfound_contents

お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。 を別の内容に書き換えられます。

sng_header

サイト共通のヘッダーを書き換えられます。引数としてヘッダーの現在のhtmlが渡されるのでこれを書き換えてreturnするのがおすすめです。

function customize_header($html) {
  return 'ここで$htmlを書き換えた内容';
}

add_filter('sng_header', 'customize_header');

sng_footer

サイト共通のフッターを書き換えられます。引数としてヘッダーの現在のhtmlが渡されるのでこれを書き換えてreturnするのがおすすめです。

function customize_footer($html) {
  return 'ここで$htmlを書き換えた内容';
}

add_filter('sng_footer', 'customize_footer');

sng_breadcrumb

パンくずリストのHTMLを書き換えます。パンくずリスト用の他のプラグインを利用している際などに役に立ちます。

sng_author_label

「この記事を書いた人」を別の内容に書き換えられます。

sng_author_info

「この記事を書いた人」の著者ブロックを好きな内容のHTMLに書き換えられます。

function customize_author_info($html) {
  return 'ここで$htmlを書き換えた内容';
}

add_filter('sng_author_info', 'customize_author_info');

sng_new_mark

記事一覧の「NEW」のHTMLの内容を書き換えられます。

sng_post_splide

記事一覧ブロックのSplideスライダーのHTMLの内容を書き換えられます。

sng_normal_card

記事一覧ページのカードのHTMLを書き換えられます。

sng_card_link

下のような記事一覧ブロックのカードのHTMLを書き換えられます。

SANGO 3.8.0をリリースしました 2023年11月30日

SANGO リストブロックが非推奨になりました 2023年11月10日

sng_longcard_link

以下のような記事一覧ブロックのロングカード型のHTMLを書き換えられます。

2023年11月30日 SANGO 3.8.0をリリースしました

sng_longcard_link_half

以下のような記事一覧ブロックのロングカード（半分）型のHTMLを書き換えられます。

2023年11月30日

SANGO 3.8.0をリリースしました

2023年11月10日

SANGO リストブロックが非推奨になりました

2023年10月20日よりWeb制作用にSANGOをお安くお買い求めいただけるボリュームライセンスの販売を開始しました。

SANGOテーマはご購入者本人様が主たる所有権を有するサイトであれば、複数サイトに渡ってご利用頂くことができますが、一方でWeb制作などの請負でご利用される場合、1所有者（1クライアント）ごとにライセンスを購入する必要があります

今まではWeb制作用に何ライセンス購入いただいても同じ価格で販売していたのですが、SANGOをサイト制作用に何度も購入いただいている方に少しでもお安く提供したいと考えまして今回のライセンスを販売させていただくことにしました。

BOOTHにて3サイト用のまとめ買いライセンスと5サイト用のまとめ買いライセンスの販売を始めます。

SANGO 制作用3ライセンス

SANGOテーマを1つ分お安くお買い求めいただけるライセンスです。

こちらのライセンスを購入いただくことで3サイトをSANGOで制作することが可能です。

こちらよりご購入いただけます。

SANGO 制作用5ライセンス

SANGOテーマを2つ分お安くお買い求めいただけるライセンスです。

こちらのライセンスを購入いただくことで5サイトをSANGOで制作することが可能です。

こちらよりご購入いただけます。

SANGO3.7.8より記事をお気に入りに登録してその記事一覧を表示できるようになりました。

この記事ではそのカスタマイズ方法について紹介します。

1. 記事ページにお気に入りボタンを追加

まずは記事ページにお気に入りボタンを追加します。

まずはSANGO Landより以下のブロックをコピーします。

参考

お気に入り追加ボタンプレビュー | SANGO Land

SANGO Land

コピーしたブロックを管理画面 → ウィジェットページにて、「記事タイトル下（共通）」に貼り付けて保存します。

SANGO Landのブロックではなくご自身でボタンをカスタマイズされたい方は以下のカスタマイズ方法を参考にしてみてください

<button class="js-sng-favorite-btn">お気に入りに追加</button>

<button class="js-sng-favorite-btn is-active">お気に入りに追加</button>

<button class="js-sng-favorite-btn" data-id="10">お気に入りに追加</button>

2. お気に入り一覧ページを用意

SANGO設定で「記事一覧ブロックでお気に入りを表示する」にチェックを入れておきましょう！

次に固定ページ等を作成し、記事一覧ブロックを呼び出します。

記事一覧ブロックの設定で表示順を「お気に入り順」にします。

固定ページをデザインして、そのページを公開します。

3. キャッシュの設定を見直す

SANGO設定→ 高速化設定 → キャッシュ設定で先ほど用意した固定ページをキャッシュしてしまわないように除外設定しましょう。

例えば公開したURLが https://example.com/favorite なら /favorite を除外ページに設定します。

以上です！

同じやり方でユーザーが閲覧した記事いちらも表示することができるのでぜひお試しください！

この記事ではSANGOでFontAwesomeを自分のサーバーで読み込む方法をご紹介します。

またこの記事を実践することで好きなFontAwesomeに対応できるだけでなく、利用するCSSを絞り込んでそれを設置できるためサイトスピードの向上にも繋がります。

1. FontAwesome6のファイルをダウンロード

まずはこちらのサイトよりFontAwesomeのファイルをダウンロードしましょう。

参考

Font Awesome

無料版を使う場合はこちらのリンクをクリックするのがいいです。

2. 子テーマにダウンロードしたファイルを設置しましょう

ダウンロードしたフォルダにはこのようなフォルダが含まれています。このうちオレンジの枠で囲われたフォルダを使用します。

これらのフォルダを子テーマに設置しましょう。

場所は子テーマ→ libraryの中に以下のように設置しましょう。

次に、設置したCSSにall.css という名前のファイルがあるのでこのファイルをfa-sango.css という名前に変えましょう。

3. SANGO設定にて子テーマのFontAwesomeを読み込むようにする

次に管理画面のSANGO設定に移動して子テーマからFontAwesomeを読み込むように設定を変更します。

SANGO設定 → 詳細設定 → FontAwesome にて、FontAwesomeの読み込み方法を「子テーマのlibrary/css/fa-sango.cssを読み込む」に変更しましょう。

これで設定は完了です。

利用するフォントを絞り込む

さらに読み込みたいフォントの種類を絞り込むようにCSSを書くことでCSSのファイルサイズを節約できサイトスピード向上につながります。sango-theme/library/css/fa-sango.cssを参考に使用するフォントだけの最低限のCSSを記述してみましょう。

この記事では2023年10月施行の景品表示法にSANGOで対応する方法について解説します。

景品表示法とは

誰もがより良い商品やサービスを求めます。ところが、実際より良く見せかける表示が行われたり、過大な景品付き販売が行われると、それらにつられて消費者が実際には質の良くない商品やサービスを買ってしまい不利益を被るおそれがあります。
景品表示法は、商品やサービスの品質、内容、価格等を偽って表示を行うことを厳しく規制するとともに、過大な景品類の提供を防ぐために景品類の最高額を制限することなどにより、消費者のみなさんがより良い商品やサービスを自主的かつ合理的に選べる環境を守ります。

消費者庁

特にブロガーの方は今回施行される景品表示法のステルスマーケティングに関する規制に注目する必要があります。

ステルスマーケティングとは

このステルスマーケティングとは商品を紹介して報酬を得ているにも関わらずそのことを隠して商品を紹介することです。消費者はそれがただの口コミなのか、アフィリエイトが目的の宣伝なのかを判断することができないのでそこに規制が入る形になります。

アフィリエイターが気をつけるべきこと

ここで着目したいのが、規制されるのは事業者（広告主）という点です。2023年10月から施行される景表法には今の所、アフィリエイターに対する罰則は設けられていませんが、間接的には影響を受けることになるでしょう。

まず、事業者（広告主）が規制されることで、ステルスマーケティングを行うアフィリエイターへの依頼自体が減少する可能性が高まります。広告主は不正行為のリスクを冒すことで罰則の対象となる恐れがあるため、透明性のある正当なマーケティング手法を選ぶことが予想されます。

アフィリエイターは広告主からの信頼を得るためにも、規定やガイドラインに従うことが不可欠です。

商品の紹介で報酬を得ている場合には必ずその記事にその旨を記載しましょう。

SANGOで景品表示法に対応する

SANGOで景品表示法に対応するには以下の手順でカスタマイズをします。

SANGO 3.7.0以上にアップデート

まず、SANGOを3.7.0以上にアップデートしましょう。

アップデート方法についてはこちらの記事をご覧ください。

2022年7月18日 WordPressテーマ「SANGO」のアップデート手順と注意点

記事タイトル下（共通）に広告表記用のブロックを追加

管理画面 → 外観 → ウィジェットにて「記事タイトル下（共通）」に広告表記用のブロックを挿入しましょう。

SANGO Landよりこちらのブロックをコピーして使うのが便利です。

参考

広告を明示するブロック(アコーディオン)プレビュー | SANGO Land

SANGO Land

なお、ウィジェット画面がブロックエディターになっていない場合はこちらの記事を見てウィジェット画面をブロックエディターに変更しましょう。

2022年12月1日 【SANGO 目次ブロック】を使って目次を設定しよう

必要に応じてカスタムフィールドと条件ブロックで表示条件を調整

また、記事の中には商品の宣伝で報酬を得ていないページも存在するかと思います。そういう場合はSANGO 3.7以降のカスタムフィールド機能を使って先ほど設定したブロックを非表示にしましょう。

管理画面 → SANGO設定 → カスタマイズ より「カスタムフィールド」ボタンをクリックします。

クリックすると以下のようなダイアログが表示されるので、「カスタムフィールドを作成」をクリックしましょう

次に、表示された項目にラベルと変数名を設定します。

変数名には小文字のアルファベットを使うことを推奨します。

カスタムフィールドを作成したら管理画面 → 外観 → ウィジェット に戻り先ほど追加した広告表示用ブロックを条件ブロックで囲みましょう。

条件ブロックに「カスタムフィールド条件」という項目があるのでその項目のボタンをクリックします。

フィールド条件を以下の画像のように追加しましょう。

これで、「記事に広告表示をする」にチェックのある記事のみに広告表示用のブロックが表示されるようになります。

記事のカスタムフィールドにチェックを入れる

最後に先ほど作成したカスタムフィールドが記事の編集ページの右カラムにある投稿パネルの一番下に表示されるのでチェックを入れましょう。

これでカスタマイズは完了です。

なお、アフィリエイト記事の方が通常の記事よりも多い場合は「記事に広告表示をしない」というカスタムフィールドを作り、チェックしていない場合を条件にした方が効率的です。

この記事ではSANGO設定で設定できる項目について解説していきます

 基本設定

WordPress基本設定

WordPress自体の機能の制限をするための設定です。利用しない機能をオフにすることができます。

Google Analytics

Googleサーチコンソール

Google サーチコンソールのサイトの所有権を確認するときに入力します。

タグは自動で挿入されるため、content=から始まるアルファベットを入力しましょう。

SEO設定

サイトのトップページのSEO設定はこちらから設定できます。

パブリッシャー設定

パブリッシャーの設定はGoogle検索時にサイトの管理人の情報を表示する際に必要です。設定しておくとサイトの管理人名やロゴなどが検索結果に表示される可能性があります。

高速化設定

サイトの表示速度を向上させたい場合に設定します。表示速度を向上させることでブログの検索順位を上昇させたり、ユーザーの滞在時間を伸ばすことができるかもしれません。

キャッシュ設定

インライン設定

CSSやJavaScriptなどのファイルを別ファイルとしてではなくHTMLに直接出力することで表示速度を向上させます。

アセットの読み込み設定

CSSやJavaScriptなどのファイルを読み込むかどうか、またどのように読み込むかを設定します。余計なファイルを読み込まないことでサイトの表示速度を向上させることができます。

アセットの読み込み設定

 広告設定

広告設定ではインフィード広告の設定や記事内広告、アドセンス広告の登録などが可能です。

Google Adsense

Google Adsenseのサイトで取得したコードを登録できます。ここに登録しておくとサイトに自動でAdsense広告が挿入されます。

インフィード広告

記事一覧や関連記事の間に広告を差し込むことができます。

また以下の設定で、記事一覧のどの位置にインフィード広告を挟むかを設定することもできます。

記事内広告

記事内広告の設定では記事のどの位置に広告を表示するのかを設定することができます。広告自体はウィジェット画面にて設定します。

カスタマイズ

エディター設定

エディター設定では記事の編集画面についての設定をすることができます。

おすすめプラグイン

SANGOと一緒に使うのがおすすめなプラグインをいくつかインストールできるようにしています。使う場合は管理画面のボタンをクリックして有効化してください。

詳細設定

その他の細かい設定はこちらで行うことができます。

コード挿入

FontAwesome

CSS, JavaScript

この設定では読み込む必要がないCSSやJavaScriptを読み込まないようにしたり、逆にサイトの機能を向上させるためにCSSやJavaScriptを使用することができます。

テーマのアップデート方法

テーマのアップデートの際に破壊的な変更を含む大きなアップデートを更新に含めるかどうかを設定します。大きくアップデートすることでサイトの調整をせざるを得ないので不安な方はチェックをしないことをお勧めします。

管理メニューの設定

管理メニューにSANGO Landへのリンクを表示するかどうかを設定します。普段SANGO Landに用がない場合は隠しておきましょう。

管理用投稿一覧ページの設定

この記事では、記事ごとに著者情報の他に記事の監修者を表示するカスタマイズをご紹介します。

この記事を実践すると以下のようなイメージで記事の監修者を表示できます

functions.phpの編集

子テーマのfunctions.phpに以下のような記述をします！

<?php

add_filter('sng_author_info', 'override_author_info', 10, 3);

function override_author_info($html, $options) {
  global $post;
  $supervisor_id = get_post_meta($post->ID, 'post_supervisor', true);
  if (!$supervisor_id) {
    return $html;
  }
  return $html . sng_author_info_by_id($supervisor_id, '記事の監修者');
}

add_action('sng_field_side_extra', function () {
  global $post;
  $meta_value = get_post_meta($post->ID, 'post_supervisor', true);
  ob_start();
  $users = get_users();
  foreach ($users as $user) {
    $selected = $user->ID === $meta_value ? " selected" : "";
  ?>
    <option value="<?php echo $user->ID ?>"<?php echo $selected ?>><?php echo $user->display_name ?></option>
  <?php
  }
  $options = ob_get_clean();
  echo '<p class="sng-field-title"><img draggable="false" role="img" class="emoji" alt="👦" src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f9d1-200d-1f4bb.svg"> 監修者名</p>';
  echo "<div style='margin-top: 10px;'>
    <select name='post_supervisor'>
      <option value=''>監修者を選択</option>
      $options
    </select>
  </div>";
});

add_action('sng_update_custom_fields', function ($post_id) {
  sng_update_custom_text_fields($post_id, 'post_supervisor');
}, 10, 3);

記事ごとに監修者を選択

各記事ページで、監修者を選択します。

SANGOテーマではカスタム投稿タイプの場合、デフォルトで投稿ページや固定ページで表示されているようなSANGO設定が表示されません。

PHPをカスタマイズすることでカスタム投稿タイプでもSANGO設定を表示することができます。

PHPの編集

例えばカスタム投稿タイプのスラグ名がnews の場合

子テーマのfunctions.phpに以下の記述をしてみてください。

add_action('admin_menu', 'add_sngmeta_custom_field');

function add_sngmeta_custom_field() {
  $sango_logo = sng_logo('sng-edit-logo');
  add_meta_box('sng-meta-description', 'メタデスクリプション', 'sng_field_meta_description', 'news', 'normal');
  add_meta_box('sng-title-tag', '【高度な設定】titleタグ', 'sng_field_title_tag', 'news', 'normal');
  add_meta_box('sng-canonical-url', 'Canonical URL', 'sng_field_canonical_url', 'news', 'normal');
  add_meta_box('sng-side-setting', "${sango_logo} SANGO設定", 'sng_field_side', 'news', 'side');
}