Ver1.3.1をリリースしました(11/22)

SANGOについてのよくある質問(随時更新)

このページではSANGOについてのよくある質問をまとめていきます。

テーマの導入について

おそらくサーバーのPHPのバージョンが古いためです。SANGOはPHP5.6以上に対応しています。サーバー側のPHPバージョンを一度見直して頂くようお願いします。
さくらインターネットの場合の確認手順
ロリポップの場合の手順
エックスサーバーの場合の手順

記事ページについて

TOC+の「上級者向け設定」で[CSSファイルを除外]にチェックが入っているかご確認くださいませ。また、カスタマイズガイド通りの設定になっているかをご確認くださいませ。

TOC+の設定方法
目次プラグイン「TOC+」の設定方法
外観⇒カスタマイズ⇒詳細設定⇒「記事のタイトル下にアイキャッチ画像を表示しない」にチェックを入れてくださいませ。

下記CSSを子テーマのstyle.cssに貼り付けてくださいませ。

style.css
.nothumb .entry-meta:after, .nothumb .page-title:after {
    content: none;
}

SANGOの初期設定では、記事タイトル下のアイキャッチ画像の横幅が自動で調整されます。もし、本来の画像サイズで表示させたい場合には、下記のCSSを子テーマのstyle.cssに追加してくださいませ。

style.css
/*アイキャッチ画像を中央寄せ*/.post-thumbnail {
  text-align: center;
}

/*アイキャッチ画像のデフォルトサイズに*/
.post-thumbnail img {
  width: auto;
}

その後にキャッシュを削除して再読込すれば、横幅いっぱいに表示されることはなくなるはずです。

下記のCSSを追加することで、フォントサイズを変更することができます。下記CSSでは、各見出しのデフォルトのサイズの値となっています。お好みで「1.35em」などと値を変更してくださいませ。

style.css
.entry-content h2 {/*h2見出し*/
   font-size: 1.4em;
}

.entry-content h3 {/*h3見出し*/
   font-size: 1.3em;
}

.entry-content h4 {/*h4見出し*/
   font-size: 1.2em;
}

「スマホ」と「PC&タブレット」では文字サイズを別にしたいという場合には、下記のようにすればOKです。

style.css
/*以下スマホでのフォントサイズ*/
.entry-content h2 {/*h2見出し*/
   font-size: 1.4em;
}

.entry-content h3 {/*h3見出し*/
   font-size: 1.3em;
}

.entry-content h4 {/*h4見出し*/
   font-size: 1.2em;
}

@media screen and (min-width: 767px) {
/*以下767px以上のデバイスでのフォントサイズ*/
  .entry-content h2 {
     font-size: 1.4em;
   }

  .entry-content h3 {
     font-size: 1.3em;
   }

  .entry-content h4 {
     font-size: 1.2em;
  }
}/*END 767px*/

ショートコードの文字列が間違っているか、ショートコードの中に装飾タグなどが入ってしまっている可能性があります。「ビジュアル」ではなく「テキスト」エディタの方を開き、ショートコードの途中に余計なタグが入っていないか確認してみてください。

なお、カスタマイズガイドからコピペした場合に、書式設定まで一緒にコピペされてしまい、それによりショートコードがうまく反映されないことがあります。
Windowsであれば「Ctrl」+「Shift」+「V」、Macであれば「⌘」+「Shift」+「V」で書式情報を含めずに貼り付けができます。

WordPressの初期設定ではショートコードの前後にpタグが自動ではさまれたりなどの整形処理が行われます。これのはさみ具合が悪いと、関連記事リンクがバラバラに分裂して表示されてしまうような現象が起こるようです。

「ビジュアル」ではなく「テキスト」エディタの方を開き、ショートコードの前後のpタグを消し、さらに前後に改行をはさめば治るかと思います。

前の文
[kanren id="◯◯"]
後の文

加えて、カスタマイザーの詳細設定で「自動で整形をオフにする」を選ぶと、今後記事を作成していく中では、この現象が起こりにくくなるかと思います。

下記CSSを子テーマのstyle.cssに追記してくださいませ。

style.css
.entry-content .linkto {
  max-width: auto;
}

下記CSSを子テーマのstyle.cssに追記してくださいませ。

style.css
.entry-content .faceicon img {
    border: none;
}

ショーコードを使えば簡単です。

記事中広告ウィジェット
[mobile]ここにモバイルでのみ表示させたいコード[/mobile]
[pc]ここにPCでのみ表示させたいコード[/pc]

これでモバイル/PCの記事中広告の表示を切り替えることができます。

子テーマのstyle.cssに以下のCSSを貼れば、記事ページでもトップページと同じ最大幅で表示されるようになります。

style.css
/*トップページと記事ページの最大幅を揃える*/
@media only screen and (min-width: 1240px) {
.single .wrap, .page .wrap, .archive .wrap, .single #inner-content, .page #inner-content {
    width: 1000px;
}
}
/*END トップページと記事ページの最大幅を揃える*/

カスタマイズにより可能です。下の記事を参照くださいませ。

関連記事に親カテゴリー内の記事も含める方法

子テーマのfunctions.phpに以下のコードを貼ることで、投稿ページ/固定ページでサイト名とセパレーター(|)が除去されるようになります。

functions.php
//titleタグからサイト名を除去
function my_single_title_parts( $title_parts ) {
  if(is_singular()) {
    $title_parts['title'] = trim( get_the_title() );
    $title_parts['tagline'] = '';
    $title_parts['site'] = '';
    }
  return $title_parts;
}
add_filter( 'document_title_parts', 'my_single_title_parts' );
//END titleタグからサイト名を除去

トップページ/アーカイブページについて

下記のCSSを子テーマのstyle.cssに追記してくださいませ。

style.css
.home #container .header, #divheader, .cardtype__article:first-child, .cardtype__article:nth-child(2), .sidelong__article:first-child, .sidelong__article:nth-child(2) {
    animation: none;
}

デフォルト画像は登録済みですか?

記事一覧などでアイキャッチ画像を登録していない記事の画像(デフォルト画像)が表示されない場合には、カスタマイザー(外観⇒カスタマイズ)で、幅520px 高さ300px以上の大きさの画像が登録されているかご確認ください(これ以下の大きさだと表示されない場合があります)。

mod_pagespeed

エックスサーバーなどの「mod_pagespeed」が有効になっていると、画像が表示されない場合があります(これはSANGOに限らず、他のテーマでも同様の現象が生じます)。

テーマを移行された場合には、おそらく過去テーマ向けのサムネイル画像がそのまま使われています(WordPressではテーマ移行しても新テーマ用のサムネイル画像が自動生成されません)。Regenerate Thumbnailsというプラグインを使うと、SANGO用のサムネイル画像を一括生成することができます。

フッター固定メニューの設置に伴い、タイトル横のハンバーガーメニューを消したいという方は以下のCSSを子テーマのstyle.cssに貼ることで、消去することができます。

style.css
/*ハンバーガーメニューを消す*/
#drawer__open {
    display: none;
}

その分だけロゴを少し大きくしたいという場合には、以下のCSSを貼って頂ければと思います。

style.css
/*ロゴが入るスペースを大きく*/
#drawer + #inner-header {
    max-width: 100%;
}

/*ロゴ画像を少し大きく*/
#logo img  {
	padding: 5px 0;
 }

ヘッダーアイキャッチ画像の設定で「文字やボタンを表示しない(画像のみ表示)」にチェックを入れると常に縦横比が固定されるようになります。

固定ページの投稿画面の右上に「表示オプション」というタブがあります。こちらを開いて、「固定ページの属性」にチェックが入っているかをご確認くださいませ。

子テーマpage-forfront.phpというファイルを作成します。

②親テーマフォルダ内にあるpage-forfront.phpの中身を全てコピーして、子テーマのpage-forfront.phpに貼り付けます。つまり複製します。

子テーマのpage-forfront.php内にget_header(); ?>という部分があります。このすぐ下に<?php get_template_part('parts/home/featured-header'); ?>を貼り付けます。
つまり、以下のようになります。

page-forfront.php
get_header(); ?>
<?php get_template_part('parts/home/featured-header'); ?>

これでヘッダーアイキャッチ画像が、トップページの固定ページにも表示されるようになります。

ヘッダーアイキャッチ画像まわりの背景色を変えたい場合

幅に制限を儲けている場合には背景色が見えることがあります。背景を白にしたい場合には、下記のように指定してください。色コード(#FFF)はお好みで変えてください。

style.css
.page-template-page-forfront {
    background: #FFF!important;
}

ヘッダーアイキャッチ画像の最大幅を変えたい場合

例えば、最大幅を固定ページの本文などと合わせたい場合には下記のように指定します。1185pxの部分が最大幅ですね。

style.css
.maximg {
    max-width: 1185px;
    margin: 1em auto;
}

通常の固定ページをトップページにした場合

もし通常の固定ページをトップページに固定した場合には、手順が異なります。この場合、page.phpを子テーマに複製して、<?php get_header(); ?>の下に下記のコードを貼ります。

page.php
<?php if ( is_home() || is_front_page() ) : ?>
    <?php get_template_part('parts/home/featured-header'); ?>
<?php endif; ?>

子テーマのstyle.cssに下記のCSSを追記します。800pxの部分を好みに応じて変えて頂ければと思います。追加後はキャッシュの削除をしましょう。

style.css
.page-forfront #inner-content {
    max-width: 800px;
}

ヘッダーアイキャッチ画像の最大幅を変えたい場合

例えば、最大幅を固定ページの本文などと合わせたい場合には下記のように指定します。

style.css
.maximg {
    max-width: 800px;
    margin: 1em auto;
}

ビジュアルエディタについて

その他過去にあった質問

累計のページビュー数です(ボットや管理人のアクセスを除く)。週間や月間などで集計すると重くなる可能性があるため、累計のみ設定可能としています。月間、週間などで集計したい場合には「WP Popular Posts」などのプラグインをご利用くださいませ。

以下のコードを子テーマのfunctions.phpに貼ることで、プロフィール欄でimgなどのHTMLタグが使えるようになります。

functions.php
//ユーザープロフィールでHTMLを使えるように
 remove_filter('pre_user_description', 'wp_filter_kses');
キャッシュ系のプラグインを入れてエラーが出る原因は、ほぼサーバー側の設定やスペックによるものです。こちらでは対応のしようがありませんので、レンタルサーバー会社に問い合わせて頂くか、プラグインをオフにして頂きますようお願い致します。

以下のCSSを貼って頂ければ少し大きくなります。2つの100pxの値を合わせて変えることで、サイズを自由に調整できます。

style.css
.yourprofile .profile-img {
    width: 100px;
    height: 100px;
}
.yourprofile .profile-img img { 
    border-radius: 50%;
 }

いくつかの作業が必要になります。

レスポンシブにしない場合(スマホでも比率固定)

まずは以下のCSSを子テーマのstyle.cssなどに貼り付けます。

style.css
.synmet .shtb2 .cell:first-of-type {
    width: 35%;
}
.synmet .shtb2.tbrsp .cell:last-of-type {
    width: 65%;
}

投稿画面の「テキストエディタ」の方を開き(ビジュアルエディタではありません)、ショートコードを以下のようにdivタグではさみます。

テキスト
<div class="synmet">
[yoko2][cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell][/yoko2]
</div>

2つの%の値を調整することで、左右を自由な比率で表示することができます。

レスポンシブする場合(モバイルでは縦に表示)

以下のCSSを子テーマのstyle.cssなどに貼り付けます。

style.css
@media screen and (min-width: 767px) {
  .synmet-res .shtb2 .cell:first-of-type {
    width: 35%;
  }
  .synmet-res .shtb2.tbrsp .cell:last-of-type {
    width: 65%;
  }
}/*end min 767px*/

投稿画面の「テキストエディタ」の方を開き(ビジュアルエディタではありません)、ショートコードを以下のようにdivタグではさみます。

style.css
<div class="synmet-res">
[yoko2 responsive][cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell][/yoko2]
</div>

2つの%の値を調整することで、左右を自由な比率で表示することができます。

現在では対応していません(もちろんプラグインを使っての実装は可能です)。今後のアップデートにより対応する可能性はあります。

下記CSSを子テーマのstyle.cssに追加するとスマホ表示でもCTAの見出しが中央寄せされるようになります。

style.css
.cta h3 {
text-align:center
}

下記CSSを子テーマのstyle.cssに追加すると、中央寄せになります。

style.css
.divheader__headline, .divheader__descr, .divheader__btn {
    text-align: center;
}

SANGOでは、人気記事や最新記事のウィジェット、関連記事ショートコード、前の記事、次の記事へのリンクなどに正方形のサムネイル画像が表示されるになっています。これらの正方形サムネイルを一括で長方形に変えたい場合には、子テーマのfunctions.phpに下記のコードを追加します。

function.php
//サムネイルサイズを変更
function my_change_thumb_size() {
	add_image_size( 'thumb-160', 160, 92, true );
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11);
//END サムネイルサイズを変更

その後、Regenerate Thumbnailsなどのプラグインを使って画像を再生成しましょう。詳しくは下記の記事をどうぞ。

【WordPress】子テーマからサムネイル画像サイズをオーバーライドする
【WordPress】子テーマからサムネイル画像サイズをオーバーライドする

2017年11月にリリースされたWordPress4.9〜、カスタムHTMLにシンタックスハイライト&チェック機能がつくようになりました。広告の表示自体には問題は無いので、気にしなくてOKだと思います。(WordPressの仕様ですので、テーマ側で警告を消すようなことはできません)。