Ver1.3.2をリリースしました(1/27)

WordPressテーマ SANGOについてのよくある質問

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

テーマの導入について

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

パーマリンク設定が原因の場合が大半です。以下の項目をお試しください。

  • サーバー側でhttps化の設定をした場合、WordPressの一般設定のURLもhttpsになっているか確認する(httpのままだと不具合が生じることがあるようです)
  • パーマリンク設定の画面にて、「変更を保存」のボタンをもう一度押してみる
  • 【カテゴリーページの場合】パーマリンク設定でカテゴリーベースにcategoryと入力する

記事ページについて

Instagramを1記事に複数箇所に貼り付けるとレイアウトが崩れることがあるようです(重なって表示されてしまう)。こちらはテーマのバグではなく、WordPressの新バージョンのバグだと思われます(他のテーマでも同様の現象がおこっているようです:参照)。
以下のCSSをstyle.cssに追記すれば修正されるかと思います。

.instagram-media {
    position: static!important;
}

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;
}

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

子テーマのstyle.cssに下記のように追記することで、タイトル下のスペースが小さくなります。ただし、円形のシェアボタンが表示されている場合には、ボタンとテキストが重なってしまうため、外観⇒カスタマイズ⇒詳細設定から円形シェアボタンはオフにして頂くようお願いします。

style.css
#main .entry-content {
    padding-top: 10px;
}
#main .article-header {
    margin-bottom: 10px;
}

下記の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」で書式情報を含めずに貼り付けができます。

①header.phpを親テーマから子テーマ内に複製します。
②子テーマのheader.phpを開き、下記コードを見つけます。

header.php
<header class="header">

③このコードのすぐ上に下記のコードを貼り付けます。

header.php
<p class="post-descr">ここにサイト説明</p>

④下記のCSSを追記します。

style.css
.header .post-descr {
    margin: 0;
    padding: 3px 0 0;/*文字上下の余白*/
    width: 100%;
    text-align: center;
    background-color: #58a9f0;/*説明部分の背景色*/
    color: #FFF;/*文字色*/
    font-size: 12px;/*文字サイズ*/
}

色や余白などは好みで調整して頂ければと思います。

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タグからサイト名を除去

子テーマ内に parts single entry-footer.phpを複製してください(子テーマにもpartsフォルダーを作成し、さらにその中にsingleのフォルダーを作成、その中にentry-footer.phpを入れてください)。

次に子テーマの entry-footer.phpを開き、17行目あたりの<?php endif; ?> の直後に下記のコードを貼り付けます。これで、著者名も表示されるようになります。

entry-footer.php
<div class="meta-tag">
  <p class="footer-meta_title">著者名 :</p> 
    <ul>
      <li>
        <a href="<?php echo esc_url(get_author_posts_url( get_the_author_meta( 'ID' ) )); ?>">
          <?php esc_attr(the_author_meta('display_name'));//名前 ?>
        </a>
      </li>
    </ul>
</div>

手順1:親テーマから子テーマに一部のファイルを複製

子テーマの中に、partsという名前のフォルダーを作成し、さらにその中にsingleという名前のフォルダーを作成します。次に、作成したsingleフォルダーの中に、親テーマからentry-footer.phpentry-content.phpというファイルを複製してきます。ファイルの内容は、一旦親テーマのものと全く同じにしてください。

手順2: 複製したentry-content.phpを編集

子テーマのparts/single内のentry-content.phpを開き、<section class="entry-content cf">の直後に、下記のコードを貼り付けます。

entry-content.php
<?php insert_author_info();//この記事を書いた人 ?>

手順3:複製したentry-footer.phpを編集

子テーマのparts/single内のentry-footer.phpを開き、下記のコードの部分を消去します。これで、コンテンツ下には「この記事を書いた人」が表示されなくなります。

entry-content.php
<?php insert_author_info();//この記事を書いた人 ?>
  1. 子テーマ内に「parts」という名前のフォルダーを作成します。
  2. 「parts」フォルダー内に「single」という名前のフォルダーを作成します。
  3. singleフォルダー内にprev-next-entry.phpという名前のファイルを作成します。ファイルの中身は空にしたままにします(1文字も書かなくてOKです)。

これで「前の記事へ」「次の記事へ」が表示されなくなるはずです。なお、子テーマ内にフォルダーを作成したりするためには「FTPソフト」を使う必要があります。(参考:【FileZillaの使い方】WordPressでFTPソフトを使おう

以下のCSSを追加してみてくださいませ。

style.css
.booklink-image > img {
    display: none;
}

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

style.css
/** トマレバ **/
.tomarebalink-name p a {
  text-decoration: none;
}
.cstmreba .tomarebalink-box {
 display: table;
 width: 100%;
 vertical-align: middle;
}
.cstmreba .tomarebalink-name > a {
 display: inline-block;
 margin-bottom: 3px;
 font-size: 1.05em;
 font-weight: bold;
 line-height: 1.5;
}
.cstmreba .tomarebalink-powered-date,
.cstmreba .tomarebalink-address {
 color: silver;
 font-size: .7em;
}
.cstmreba .tomarebalink-powered-date a {
 color: silver;
}
.cstmreba .tomarebalink-image {
 display: table-cell;
 width: 80px;
 vertical-align: middle;
}
.cstmreba .tomarebalink-image a img {
 width: 100%;
}
.cstmreba .tomarebalink-info {
 display: table-cell;
 width: calc(100% - 80px);
 padding-left: 15px;
}
.cstmreba .tomarebalink-link1,
.booklink-link2 {
 margin-top: 8px;
}
.cstmreba .tomarebalink-link1 > div,
.booklink-link2 > div {
 display: inline-block;
 height: 37px;
 margin: 5px 10px 5px 0;
 padding: 0 9px;
 border-radius: 3px;
 background: #73c1ea;
 box-shadow: 0 8px 15px -5px rgba(0,0,0,.25);
 font-size: .95em;
 font-weight: bold;
 vertical-align: middle;
 line-height: 37px;
 transition: .3s ease-in-out;
}
.cstmreba .tomarebalink-link1 > div a {
 display: inline-block;
}
.cstmreba .tomarebalink-link1 > div:hover {
 box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
.cstmreba .tomarebalink-link1 a:before {
 padding-right: 3px;
 font-family: FontAwesome;
 content: "\f0da";
}
.tomarebalink-link1 .shoplinkrakuten {
 background: #ea7373;
}
.tomarebalink-link1 .shoplinkjalan {
 background: #f7845f;
}
.tomarebalink-link1 .shoplinkjtb {
 background: #f38c8c;
}
.tomarebalink-link1 .shoplinkknt {
 background: #6AA3EB;
}
.tomarebalink-link1 .shoplinkikyu {
 background: #8acdff;
}
.tomarebalink-link1 .shoplinkrurubu {
 background: #febd5a;
}
.tomarebalink-link1 .shoplinkyahoo {
 background: #ea7373;
}
.cstmreba .tomarebalink-link1 a {
 color: #fff;
}
/*余計な余白の削除*/
.tomarebalink-info img {
  display: none;
}
.tomarebalink-name p {
  margin-bottom: 0;
}

下記のコードを子テーマのfunctions.phpに追記することで、日付だけでなく投稿時間も表示させることができます。

functions.php

function sng_comments( $comment, $args, $depth ) {
     $GLOBALS['comment'] = $comment; ?>
    <div id="comment-<?php comment_ID(); ?>" <?php comment_class('cf'); ?>>
      <article  class="cf">
        <header class="comment-author vcard">
          <?php
            $bgauthemail = get_comment_author_email();
          ?>
         <?php echo get_avatar( $comment, 40 ); ?>
          <?php printf('<cite class="fn">%1$s</cite> %2$s', get_comment_author_link(), edit_comment_link( '(Edit)','  ','') ) ?>
          <time datetime="<?php echo comment_time('Y-m-j'); ?>"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>" rel="nofollow"><?php comment_time('Y年n月j日 g:i A'); ?> </a></time>

        </header>
        <?php if ($comment->comment_approved == '0') : ?>
          <div class="alert alert-info">
            <p><?php echo 'あなたのコメントは現在承認待ちです。'; ?></p>
          </div>
        <?php endif; ?>
        <section class="comment_content cf">
          <?php comment_text() ?>
        </section>
        <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </article>
    <?php // </li>はwordpressにより自動で追加 ?>
  <?php
  } //END sng comments

子テーマのfunctions.phpに下記のコードを追記してくださいませ(バックアップをお忘れなく!)。

//シェアボタンの文言変更
function insert_social_buttons($type=null) {
    $share_url = (is_home() || is_front_page()) ? home_url('/') : get_permalink();
    $encode_url = urlencode($share_url);
    $sitename = (is_home() || is_front_page()) ? '' : '|'.get_bloginfo('name');
    $sitename = urlencode($sitename);
    $raw_title = (is_home() || is_front_page()) ? get_bloginfo('name').'|'.get_bloginfo('description') : get_the_title();
    $encode_title = urlencode($raw_title);
    $tw_via = (get_option('include_tweet_via')) ? '&via='.get_option('include_tweet_via') : '';
   ?>
    <div class="sns-btn<?php 
    if(get_option('another_social') && $type !== 'fab') echo ' sns-dif';
    if($type !== 'fab') echo ' normal-sns'; ?>">
      <?php if($type == null) echo '<span class="sns-btn__title dfont">SHARE</span>' ?>
      <ul>
          <li class="tw sns-btn__item">
              <a href="http://twitter.com/share?url=<?php echo $encode_url; ?>&text=<?php echo $encode_title.$sitename.$tw_via;?>" target="_blank" rel="nofollow">
                  <i class="fa fa-twitter"></i>
                  <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>
          <li class="fb sns-btn__item">
              <a href="http://www.facebook.com/share.php?u=<?php echo $encode_url; ?>&t=<?php echo $encode_title.$sitename; ?>" target="_blank" rel="nofollow">
                  <i class="fa fa-facebook"></i>
                  <span class="share_txt">シェア</span>
              </a>
              <?php if(function_exists('scc_get_share_facebook')) echo '<span class="scc dfont">'.scc_get_share_facebook().'</span>'; ?>
          </li>   
          <li class="hatebu sns-btn__item">
            <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $encode_url; ?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" target="_blank" rel="nofollow">
                  <i class="fa fa-hatebu"></i>
                  <span class="share_txt">はてブ</span>
              </a>
              <?php if(function_exists('scc_get_share_hatebu')) echo '<span class="scc dfont">'.scc_get_share_hatebu().'</span>'; ?>
          </li>
          <?php if(!get_option('another_social') || $type == 'fab'): ?>
              <li class="gplus sns-btn__item">
                  <a href="https://plus.google.com/share?url=<?php echo $encode_url; ?>" target="_blank" rel="nofollow">
                      <i class="fa fa-google-plus" aria-hidden="true"></i>
                      <span class="share_txt">Google+</span>
                  </a>
                  <?php if(function_exists('scc_get_share_gplus')) echo '<span class="scc dfont">'.scc_get_share_gplus().'</span>'; ?>
              </li>
          <?php endif; ?>
          <li class="pkt sns-btn__item">
             <a href="http://getpocket.com/edit?url=<?php echo $encode_url; ?>&title=<?php echo $encode_title.$sitename; ?>" target="_blank" rel="nofollow">
                  <i class="fa fa-get-pocket"></i>
                  <span class="share_txt">Pocket</span>
              </a>
              <?php if(function_exists('scc_get_share_pocket')) echo '<span class="scc dfont">'.scc_get_share_pocket().'</span>'; ?>
          </li>
          <li class="line sns-btn__item">
              <a href="http://line.me/R/msg/text/?<?php echo $encode_url; ?>%0D%0A<?php echo $encode_title.$sitename; ?>" target="_blank" rel="nofollow">
                 <i class="fa fa-comment"></i>
                  <span class="share_txt dfont">LINE</span>
              </a>
          </li>
      </ul>
  </div>
  <?php 
  }//END シェアボタン

上のコード12行目の「SHARE」を好きな文言にご変更くださいませ。

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

パーマリンク設定が「基本(?p=123のような形)」になっている場合、このエラーが生じてしまいます。公開したばかりのサイトであれば、パーマリンク設定を変えれば良いですが、すでに検索流入が多いサイトの場合には、パーマリンク設定変更ができない場合もあると思います。

パーマリンク設定を変えられない場合の対処法

手順1:sng-function.phpを置き換え

MEMO
手順1は、Ver1.3.1までのバージョンをご利用の方に行って頂く必要があります。Ver1.3.2で修正する予定です。

親テーマのlibrary⇒functions内に「sng-function.php」というファイルがあります。これを下でダウンロードしたファイルに置き換えてくださいませ。

修正用sng-function.php

ダウンロードファイルはzip形式になっているため、解凍後に置き換えをお願いします。置き換え方が分からない場合には、テキストエディタで開き、コードを全文コピーして内容を置き換えても構いません。

手順2:子テーマのfunctions.phpにコードを貼り付け

MEMO

親テーマのfunctions.phpに貼り付けても動きますが、アップデートした際に内容が上書きされてしまわないように、子テーマを利用するのがおすすめです。子テーマを導入していない方は導入方法をご覧くださいませ。

子テーマのfunctions.phpに下記のコードを追記してください。

functions.php
//基本パーマリンク用のアーカイブタイトル
function custom_archive_title($title) {
  return $title;
}

function sng_date_title() {
}

function breadcrumb(){
    global $post;
    $str ='';

      if( !is_home()&&!is_admin() ){
          $str.= '<nav id="breadcrumb"><ul itemscope itemtype="http://schema.org/BreadcrumbList">';

          $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. home_url() .'" itemprop="item"><span itemprop="name">ホーム</span></a><meta itemprop="position" content="1" /></li>';

          if( is_category() ) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                $i = 2;
                foreach($ancestors as $ancestor){
                  $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. esc_url(get_category_link($ancestor)) .'" itemprop="item"><span itemprop="name">'. esc_attr(get_cat_name($ancestor)) .'</span></a><meta itemprop="position" content="'.$i.'" /></li>';
                  $i++;
                } //endforeach
            } 

          } elseif( is_tag() ) {
              $str .= '<li><i class="fa fa-tag"></i> タグ</li>';

          } elseif( is_date() ){//日付ページ
            $m = get_query_var('m');
            $year = (int) substr("$m", 0, 4);
            $month = (int)  substr("$m", 4, 2 );
            $day= (int) substr("$m", 6, 2);
            if(is_day()){
              $str .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_year_link($year).'" itemprop="item"><span itemprop="name">'.$year.'年</span></a><meta itemprop="position" content="2" /></li>';
              $str .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_month_link($year, $month).'" itemprop="item"><span itemprop="name">'.$month.'月</span></a><meta itemprop="position" content="3" /></li>';
            } elseif(is_month()){
              $str .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_year_link($year).'" itemprop="item"><span itemprop="name">'.$year.'年</span></a><meta itemprop="position" content="2" /></li>';
            }

          } elseif( is_author() ){
            $str .= '<li>著者</li>';
          } elseif( is_page() ){
              if($post -> post_parent != 0 ){
                  $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                  $i = 2;
                  foreach($ancestors as $ancestor){
                      $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. esc_url(get_permalink($ancestor)).'" itemprop="item"><span itemprop="name">'. esc_attr(get_the_title($ancestor)) .'</span></a><meta itemprop="position" content="'.$i.'" /></li>';
                      $i++;
                  }
              }
          } elseif( is_single() ){
              $categories = get_the_category($post->ID);
              if(!$categories) return false;
              $cat = $categories[0];
              $i = 2;
              if($cat -> parent != 0){
                  $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                  foreach($ancestors as $ancestor){
                      $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. esc_url(get_category_link($ancestor)).'" itemprop="item"><span itemprop="name">'. esc_attr(get_cat_name($ancestor)). '</span></a><meta itemprop="position" content="'.$i.'" /></li>';
                      $i++;
                  }
              }
              $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. esc_url(get_category_link($cat -> term_id)). '" itemprop="item"><span itemprop="name">'. esc_attr($cat-> cat_name) . '</span></a><meta itemprop="position" content="'.$i.'" /></li>';

          } else {
              $str.='<li>'. wp_title('', false) .'</li>';
          }
          $str.='</ul></nav>';
    }
    echo $str;
}//END 基本パーマリンク用のアーカイブタイトル

パーマリンク設定を変更する場合には、上記コードは削除するようにお願いします(ファイルの再置き換えは必要ありません)。

下記の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;
}//END パーマリンク設定へ合わせるためのアーカイブタイトルの設定変更

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

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

mod_pagespeed

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

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

SANGOでは、トップページなどで使われるデフォルトのサムネイル画像は幅「520px」 × 高さ「300px」となっています(比率1.73:1)。 例えば、この高さを350pxにしたい場合には以下のようにします。

①子テーマのfunctions.phpに下記のコードを追記

//サムネイル画像の高さを350pxにオーバーライド(解説)
function my_change_thumbnail_size() {
  add_image_size( 'thumb-520', 520, 350, true );
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド

②子テーマのstyle.cssに下記のコードを追記

#main .cardtype__img {
    padding-bottom: 67%;/*縦横比で計算*/
}

③プラグイン「Regenerate Thumbnail」を実行

これによりサムネイルが再生成されます。

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

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

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

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

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

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

「ヘッダーアイキャッチ画像を表示する」にチェックを入れると、PHPコードが変わります。そのため、カスタマイザー上では再読込を行うまで反映がされません。保存してから(「公開」をクリック)ご確認頂くようお願いします。

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

固定ページは、トップページやカテゴリーページの記事一覧などで表示されないため、アイキャッチ画像を登録しないことをおすすめします。もし何らかの理由で固定ページのアイキャッチ画像も一括非表示にしたい場合には、page.phpを子テーマに複製して下記の部分を消去してくださいませ。

<?php if (has_post_thumbnail()): //アイキャッチ?>
	<p class="post-thumbnail">
		<?php the_post_thumbnail('large');?>
	</p>
<?php endif; ?>

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

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

子テーマのpage-forfront.php内にget_header(); ?>という部分があります。このすぐ下に下記のコードを貼り付けます。

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

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

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

幅に制限を儲けている場合には背景色が見えることがあります。背景を白にしたい場合には、下記のように指定してください。色コード(#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;
}

下記の方法で実現できます。ただし、この方法はトップページ用固定ページには対応していません。通常の固定ページをホーム固定する場合のみご利用頂くことができます。
また、ページネーション(2ページ名以降の一覧ページを表示すること)は表示できませんので、ご了承ください。

1. 子テーマにpage.phpを複製

親テーマよりコピーし、sango-theme-child内に複製します。子テーマを使わずに直接page.phpを編集した場合、テーマのアップデートにより内容が消えてしまうのでご注意ください。

2. page.php内にコードを貼り付け

複製したpage.phpを開き、下記コードを見つけてください。

page.php
<?php else : ?>
	<?php get_template_part('content', 'not-found'); ?>
<?php endif; ?>

このコードの直下に次のコードを貼り付けます。

page.php
<?php if(is_front_page()) :
		$paged = get_query_var('paged');
			query_posts("posts_per_page=10&paged=$paged"); ?>
	  <div class="cardtype cf">
       <?php if (have_posts()) : while(have_posts()) : the_post(); ?>
          <article class="cardtype__article">
						<a class="cardtype__link" href="<?php the_permalink() ?>">
							<p class="cardtype__img">
								<img src="<?php echo featured_image_src('thumb-520'); ?>" alt="<?php the_title(); ?>">
							</p>
							<div class="cardtype__article-info">
								<?php if(!get_option('remove_pubdate')):?>
								<time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
								<?php endif; ?>
								<h2><?php the_title(); ?></h2>
							</div>
						</a>
						<?php 
						if(!is_archive()) output_catogry_link();//カテゴリーを出力
						newmark();//newマーク
						?>
			</article>
    <?php endwhile;  endif; ?>
	</div>
<?php endif; ?>

posts_per_page=10の数字を変えることで、表示する記事数を指定することができます。

3. CSSを追加

最後に、レイアウト調整のため、次のCSSを子テーマのstyle.cssに追加します。

style.css
/*固定ページ下に新着記事一覧*/
.page .cardtype {
    padding: 1em;
}
@media only screen and (min-width: 1030px) {
  .page .cardtype {
      padding: 0;
  }
  .page .cardtype__article {
      width: 46%;
      margin: 0 1.7% 2em;
  }
}

Ver1.3.1〜ショートコードで新着記事を好きな数だけ出力できるようになりました。詳しくはこちらをご覧くださいませ。

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

その他過去にあった質問

累計のページビュー数です(ボットや管理人のアクセスを除く)。週間や月間などで集計すると重くなる可能性があるため、累計のみ設定可能としています。月間、週間などで集計したい場合には「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の仕様ですので、テーマ側で警告を消すようなことはできません)。

下記の点を見直してみてください。

  • カスタムHTMLで貼り付けていますか?(カスタムテキストだと空白が大きめにできてしまうことも)
  • コードの前後にスペースが入っていませんか?
  • 「スポンサーリンク」は広告タグの前に<p class="nospace center small">スポンサーリンク</p>を貼り付けて表示させると良いかもしれません(ウィジェットタイトルは空白に)

WordPressではサーバー側でmod_pagespeedという高速化設定をオンにしている場合に画像がうまく表示されないことがあるようです。画像がうまく表示されない場合には、オフにするのが良いかと思います。

参考

mod_pagespeed設定についてXSERVER

フッター固定メニューの設定で、以下のような項目を追加すればOKです。

  • リンク先URLをtel:0123456789などとします。tel:◯◯として◯◯に電話番号を入れればOKです。
  • リンク文字列は<i class="fa fa-phone"></i>問い合わせなどとします。これで電話のアイコンになります。

親テーマフォルダーにcontent-not-found.phpというファイルがあります。このファイルを子テーマ内に複製します(中身もファイル名も全く同じに)。子テーマのcontent-not-found.phpに404ページの文言が書かれています。こちらを変更してくださいませ。

例えば、親テーマの partsディレクトリ内のファイルを子テーマで編集するためには、そのディレクトリ構造を子テーマで再現する必要があります。
parts single entry-footer.php を編集したい場合には、子テーマに partsを作成し、さらにその中に singleを作成し、その中に entry-footer.phpを複製する必要があります。これで、子テーマ内の entry-footer.phpが読み込まれるようになります。

下記CSSを子テーマのstyle.cssに貼り付けてみてくださいませ。background-color: ◯◯の部分で背景色を指定します。

style.css
.footer-links a {
    margin: .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .4em 1.3em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #0F6A83;/*ボタン色*/
    color: #fff;/*文字色*/
    vertical-align: middle;
    font-weight: bold;/*太字*/
}

.footer-links a:hover{
    text-decoration: none!important;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}

WordPress4.9〜スタイルシートのチェック機能が搭載され、黄色や赤の警告マークが表示されることがあります。ページの表示には全く問題がないため、無視して頂いて問題ございません。編集される場合には「サイトを壊してしまうかもしれませんが〜」にチェックを入れて更新すればOKです。ただし、カスタマイズは管理画面上で行うより、FTPソフトを使うのがおすすめです。

AdsenseのQuickStart広告をご利用されていませんか?

SANGOでは、FontAwesomeのVer.4を利用しています。Ver.5のアイコンを利用していると、アイコンが表示されないことがあります。Ver.4のアイコン一覧からご利用くださいませ。