【SANGO】トップページのカスタマイズ（簡潔版）

トップページのカスタマイズは SANGO サポーターなどで簡単にできるので、需要があるかは分かりませんが、このサイトのトップページのカスタマイズ方法をまとめてみました。手順通りに作業していけば、こんなトップページが出来上がります。

この記事は、色々な説明を省いて手順だけをまとめた簡潔版です。変更できる個所なども最低限（タブや見出しの色など）しか記載していないため、そっくりこのままのデザインで良い方向けとなります。
このカスタマイズでやっていることを詳しく知りたい方・表示件数やカラム等もっと細かくカスタマイズしたい方は、後ほど詳細版の記事を上げるつもりなので、そちらをお待ちください。

1 はじめに
- 1.1 用意するもの
- 1.2 カスタマイズ前の準備
2 トップページと記事一覧ページを作る
- 2.1 記事一覧ページを作る
- 2.2 トップページを作る
3 カスタマイズする
- 3.1 HTML 部分
- 3.2 CSS 部分
4 完成！

はじめに

用意するもの

FTP ソフトとテキストエディタ
サーバーのファイルマネージャー

のうち、どちらかを使用します。

カスタマイズ前の準備

子テーマの「function.php」に以下をコピペする

子テーマの function.php にコピペする

function.php

//ショートコード化のためのウィジェット
register_sidebar( array(
'id' => 'custom_shortcord',
'name' => 'ショートコード化するウィジェット',
'description' => 'ここに追加したウィジェットを、記事内などにショートコードで表示させることができます。',
'before_widget' => '<div class="widget custom_sc">',
'after_widget' => '</div>',
) );

//ウィジェットを呼び出すショートコード
function add_widget_func($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
get_template_part($file,'');
return ob_get_clean();
}
add_shortcode('add_widget', 'add_widget_func');

WordPress＞外観＞テーマの編集　からテキストエリアにコピペ（追記）する
wp-content＞theme＞sango-child-theme からダウンロードした「function.php」に追記して上書きアップロードする

どちらかの方法で上のコードを「function.php」に追記してください。

テーマ本体の直下にPHPファイルを作成する

custom_widget.php

<?php dynamic_sidebar('custom_shortcord'); ?>

新規ファイルを作成して上記の1行をコピペし、「custom_widget.php」という名前を付けて保存するか、下のボタンからファイルをダウンロードしてください。

ZIP ファイルをダウンロードする

ダウンロードした ZIP ファイルを展開すると、「custom_widget.php」というファイルが入っています。

FTP ソフトかサーバーのファイルマネージャーで、wp-content＞themes＞sango-theme と進み、SANGO のテーマ直下（子テーマではなく本体の方）に「custom_widget.php」をアップロードしてください。

新しいウィジェットエリアに「人気記事」と「最新記事」を追加する

WordPress＞外観＞ウィジェット　に新しいウィジェットエリアが増えているので、ここに SANGO の「人気記事」ウィジェットと「最新記事」ウィジェットを追加します。

見出し部分に表示されるタイトルと表示件数も設定してください。

トップページと記事一覧ページを作る

記事一覧ページを作る

WordPress＞固定ページ＞新規追加　から、新しい固定ページを作ります。
好きなタイトルを入れて一度下書き保存します。

パーマリンクに「all_posts_archive」と記入し、本文には何も書かずに保存します。

トップページを作る

WordPress＞固定ページ＞新規追加　から、新しい固定ページを作ります。
「トップページ用1カラム」というテンプレートを選び、好きなタイトルを入れて一度下書き保存します。

パーマリンクを任意のものに直し、本文のエリアに以下をコピペしてください。（右上の「COPY」からワンクリックでコピーできます）CSS はこのページでしか使用しないので、本文エリアに HTML と一緒にコピペするのがおすすめです。
子テーマの style.css にコピペして表示が崩れた場合は、該当部分のクラス名の先頭にページ固有のクラス名「.page-id-〇〇（投稿ID）」を付け足せば、おそらく対応できると思います。

MEMO

以前は CSS を <head> 内以外の場所に書くのは文法違反だったのですが、2017年12月に勧告された HTML5.2 で、<body> 内に link 要素や style 要素を置いて CSS を読み込ませてもOKになりました。

注意

余計なタグが挿入されたりするのを防ぐため、テキストエディタに切り替えてからコピペ・カスタマイズしてください。

固定ページの本文にコピペするHTML

固定ページの記事本文

[no_toc]
<!-- ページ上部の自由エリアが必要なければ削除 -->
<div class="top_description">
[yoko2 responsive]
[cell]<p>SANGO の横2列のショートコード<br>左側のセル</p><p>ここは自由に変更してください</p>[/cell]
[cell]<p>SANGO の横2列のショートコード<br>右側のセル</p><p>必要なければ消去してください</p>[/cell]
[/yoko2]
</div>
<!-- ページ上部の自由エリアが必要なければ削除ここまで -->

<!-- おすすめ4記事 -->
<div class="tag_posts">
<p class="fukidashi_down"><i class="fa fa-heart-o"></i> PICK UP!</p>
<div class="cardtype cf">
[tagpost id="タグのID" num="4" type="card"]<!-- ここにタグのIDを記入 -->
</div>
</div>
<!-- おすすめ4記事ここまで -->

<!-- 人気記事・新着記事 -->
<div class="cardtype cf">
[add_widget file='custom_widget']
</div>
<a class="more_posts" href="/all_post_archive/"><i class="fa fa-map-signs"></i> 最新記事をもっと読む</a>
<!-- 人気記事・新着記事ここまで -->

<!-- カテゴリ別新着記事 -->
<div class="cate_new_posts">
<p class="fukidashi_down"><i class="fa fa-check"></i> カテゴリ別新着記事</p></div><!-- タイトル部分 -->
<div class="tab_posts">
<input id="tab_1" type="radio" name="tab_item" checked>
<input id="tab_2" type="radio" name="tab_item">
<input id="tab_3" type="radio" name="tab_item">
<input id="tab_4" type="radio" name="tab_item">

<!-- タブ -->
<div class="tab_area">
<label id="tab1"class="tab_item" for="tab_1">タブ１</label><!-- タブ１タイトル -->
<label id="tab2"class="tab_item" for="tab_2">タブ２</label><!-- タブ２タイトル -->
<label id="tab3"class="tab_item" for="tab_3">タブ３</label><!-- タブ３タイトル -->
<label id="tab4"class="tab_item" for="tab_4">タブ４</label><!-- タブ４タイトル -->
</div>
<!-- タブここまで -->

<!-- タブ１をクリックした時に表示される記事（デフォルト） -->
<div class="tab_content" id="tab1_content">
<div class="cardtype cf">
[catpost catid="カテゴリID" num="6" type="card"]
<div class="more_cate_posts center">
[btn href="カテゴリページのURL" class="raised main-bc strong rippler rippler-default"]<i class="fa fa-mortar-board"></i> もっと読む[/btn]
</div>
</div>
</div>

<!-- タブ２をクリックした時に表示される記事 -->
<div class="tab_content" id="tab2_content">
<div class="cardtype cf">
[catpost catid="カテゴリID" num="6" type="card"]
<div class="more_cate_posts center">
[btn href="カテゴリページのURL" class="raised main-bc strong rippler rippler-default"]<i class="fa fa-mortar-board"></i> もっと読む[/btn]
</div>
</div>
</div>

<!-- タブ３をクリックした時に表示される記事 -->
<div class="tab_content" id="tab3_content">
<div class="cardtype cf">
[catpost catid="カテゴリID" num="6" type="card"]
<div class="more_cate_posts center">
[btn href="カテゴリページのURL" class="raised main-bc strong rippler rippler-default"]<i class="fa fa-mortar-board"></i> もっと読む[/btn]
</div>
</div>
</div>

<!-- タブ４をクリックした時に表示される記事 -->
<div class="tab_content" id="tab4_content">
<div class="cardtype cf">
[catpost catid="カテゴリID" num="6" type="card"]
<div class="more_cate_posts center">
[btn href="カテゴリページのURL" class="raised main-bc strong rippler rippler-default"]<i class="fa fa-mortar-board"></i> もっと読む[/btn]
</div>
</div>
</div>
</div>
<!-- HTML ここまで -->

固定ページの本文にコピペする CSS

CSS

<style>
/*ページ全体*/
#content.page-forfront,#container,#entry{background:transparent;}
.page-forfront .entry-content{padding:0;}
.entry-content img{box-shadow:none;margin:0;}
.page-forfront .entry-content a{border-bottom:0;}
.cardtype{margin-bottom:0;}
.c_linkto{max-width:100%;}
.tab_item, a.more_posts{cursor:pointer;}

/*アイキャッチっぽい部分*/
.top_description{width:calc(100% - 20px);text-align:center;font-size:.9em;margin:0 auto;}

/*ピックアップ4記事（タグ）*/
.tag_posts{width:calc(100% - 6px);margin:0 auto 20px;}
.tag_posts .c_linkto{width:calc(25% - 12px);margin:0 6px;}
.tag_posts .c_linkto_text{font-size:.85em;}

/*人気記事・新着記事の見出し*/
/*記事部分の見出しのCSSが適用されるので上書きしています*/
.entry-content h2:before,.entry-content h2:after{display:none}/*疑似要素を使いたい場合はこの行を削除してください*/
.entry-content .my_popular_posts h2, .entry-content .custom_sc h2,{
background: 背景色; /*タイトル部分の背景色*/
color: 文字色; /*タイトルの文字色*/
font-size: 1.2em;
border:0;
}

/*人気記事・新着記事*/
.my_popular_posts li,.custom_sc li{list-style-type:none;}
.my_popular_posts, .custom_sc{display:inline-block;width: calc(50% - 20px);margin:20px 10px 0;padding:0 0 10px;}
.my_popular_posts h2.widgettitle,.custom_sc h2.widgettitle{padding:10px 20px;margin:0 0 20px;}
.my_popular_posts ul li,.custom_sc ul li{margin:0 15px 0 0;}
.my-widget li a .my-widget__text{padding:0 0 0 10px;}

.my_popular_posts li a:hover,.custom_sc li a:hover{
background-color:#eaf4fc!important; /*記事にカーソルを乗せた時の色*/
}

/*カテゴリ別新着記事*/
.tab_posts{background:transparent;width:100%;margin 0;}
.tab_posts .c_linkto{width:calc(100%/3 - 20px);margin:20px 10px 0;}
.tab_posts .c_linkto_text{font-size:.85em;}

/*タブのスタイル*/
.tab_area {width:calc(100% - 20px);font-size:0;background:#fcfcfc;margin:0 10px;border-radius:2px;box-shadow:rgba(0, 0, 0, 0.2) 0px 3px 10px -2px;}
.tab_item {width: calc(100%/4);height:50px;line-height:50px;font-size:16px;text-align:center;color:#565656;display:inline-block;text-align:center;font-weight:bold;border-right:1px solid #eaeaea;transition:all 0.2s ease;}
#tab4.tab_item{border: none;}
.tab_item:hover{opacity: 0.75;}

/*ラジオボタンを全て消す*/
input[name="tab_item"]{display:none;}

/*タブ切り替えの中身のスタイル*/
.tab_content{display:none;padding:0;overflow:hidden;}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked~#tab1_content,#tab_2:checked~#tab2_content,#tab_3:checked~#tab3_content,#tab_4:checked~#tab4_content{display: block;}
#tab_1:checked~.tab_area #tab1{border-radius: 3px 0 0 3px;}
#tab_4:checked~.tab_area #tab4{border-radius: 0 3px 3px 0}

#tab_1:checked~.tab_area #tab1, #tab_2:checked~.tab_area #tab2, #tab_3:checked~.tab_area #tab3, #tab_4:checked~.tab_area #tab4{
background: 背景色; /*選択されているタブの背景色*/
color: #文字色; /*文字色*/
}

/*リンク*/
.more_cate_posts{width:100%;margin:20px 0 0;}
.entry-content .more_cate_posts a.btn{width:calc(100%/3 - 20px);}
#inner-content .more_cate_posts .btn{margin:0;}

a.more_posts {
text-align: center;
background: #eaedf7; /*記事一覧へのリンクの背景色*/
color: #afafaf; /*文字色*/
margin:0;
padding: 10px 20px;
display: block;
width: 100%;
border-radius: 2px;
}
a.more_posts:hover {
background: #eaf4fc; /*記事一覧へのリンクにカーソルを乗せた時の背景色*/
color: #8491c3; /*文字色*/
border-radius: 2px;
}

/*吹出タイトル*/
.fukidashi_down img{max-width:300px;height:auto;}
.tag_posts p.fukidashi_down{margin:0 50% 20px 4px;}
.cate_new_posts p.fukidashi_down{margin:0 50% 20px 10px;}
p.fukidashi_down{width:calc(50% - 10px);padding: 10px 25px;text-align:center;font-size:1.2;}

.fukidashi_down{
position: relative;
display: inline-block;
min-width: 120px;
max-width: 100%;
color: #4d4c61; /*吹出の文字色*/
background: #eaedf7; /*吹出の背景色*/
border-radius: 5px;
}
.fukidashi_down:before {
content: "";
position: absolute;
left: 50%;
bottom: -40px;
margin-left: -20px;
border: 20px solid transparent;
border-top: 20px solid #eaedf7; /*吹出の背景色*/
}

/*レスポンシブ対応用*/
@media only screen and (min-width: 768px){
a.more_posts{width:calc(50% - 20px);margin:0 0 20px calc(50% + 10px);}
}
@media only screen and (min-width:1030px) {
.wrap,#inner-header,#inner-content{max-width: 1000px;}
}
@media only screen and (max-width: 1029px){
.entry-content ul.my-widget{width:100%;padding:0 0 0 7px;}
.my_popular_posts ul li,.custom_sc ul li{margin:0 7px 0 0;}
.my_popular_posts, .custom_sc {margin: 20px 9.5px 0;}
.tag_posts{width:100%;margin:0 auto;}
.tag_posts .c_linkto{width:calc(50% - 20px);margin:0 9.5px 20px;}
.tab_posts .c_linkto{width:calc(50% - 20px);margin:20px 9.5px 0;}
.tag_posts p.fukidashi_down, .cate_new_posts p.fukidashi_down{margin:20px 10px 25px;width:calc(100% - 20px);}
}
@media only screen and (max-width: 480px) {
.top_description,.head_intro,.thor,.tag_posts .c_linkto,.tab_area,.tab_posts .c_linkto,.my_popular_posts,.custom_sc,p.fukidashi_down,.tag_posts p.fukidashi_down,.cate_new_posts p.fukidashi_down,.entry-content .more_cate_posts a.btn{width:100%;}
.tab_area{margin:10px 0;}
.tab_item{width: calc(100%/2);}
#tab1.tab_item,#tab2.tab_item{border-bottom: 1px solid #eaeaea;}
#tab_1:checked~.tab_area #tab1{border-radius: 3px 0 0 0;}
#tab_2:checked~.tab_area #tab2{border-radius: 0 3px 0 0;}
#tab_3:checked~.tab_area #tab3{border-radius: 0 0 3px 0;}
#tab_4:checked~.tab_area #tab4{border-radius: 0 0 0 3px}
.tab_posts .c_linkto{margin:20px 9.5px 10px;}
.tag_posts .c_linkto{margin:10px 9.5px 20px;}
.cate_new_posts p.fukidashi_down,.tag_posts p.fukidashi_down{margin:30px auto 20px;}
p.fukidashi_down{padding:10px 5px;}
a.more_posts{margin:0 0 20px;}
.more_cate_posts{margin:10px auto 20px;width:calc(100% - 20px);}
.my_popular_posts,.custom_sc{margin:20px 0 0;}
}
</style>

カスタマイズする

コピペしたら自分のサイトに合わせてカスタマイズしていきます。変更箇所にはコメントが入っていますので、ここでの説明を参考に変更していってください。

HTML 部分

ヘッダーアイキャッチっぽい部分

ここは画像なりテキストなりを自由に記入できます。
ひな形として SANGO の横2列のショートコードが入っていますが、必要なければコメントの入っている部分を丸ごと削除してください。

カテゴリ別新着記事

、 というコメントが入っている行を変更します。タブの上に表示されるタイトルと、それぞれのタブに表示させたいカテゴリ名を記入してください。

下へ進んで、 というコメントが入っている部分には、対応するカテゴリID とカテゴリページの URL を記入します。

「もっと読む」の部分には SANGO のリップルエフェクト付きボタン（メインカラー）のショートコードを入れてあります。変更したい場合はショートコードごと消して書き換えてください。

MEMO

カテゴリやタグの ID を調べるには、まず WordPress＞投稿＞カテゴリー・タグと進んでください。各カテゴリー・タグ名の上にカーソルを乗せると、画面の一番下あたりに小さい字で URL が表示されると思います。文字列の真ん中くらいにある「ID=〇」という部分の数字が、各カテゴリー・タグの ID です。