1ブログのデザインはとても大事な要素です。SANGOテーマは非常に美しく洗礼されたデザインで、一目惚れで導入した方も多いかと思います。SANGOで作られたブログを見る度に「もう少しオリジナリティ出したいなぁ」という欲が出てきたりしませんか?今回はすべての記事の玄関である”フロントページ”の見た目を一新するカスタマイズを紹介します。このブログで行ったカスタマイズをまとめてあります!【SANGOカスタマイズ全集】美しいWPテーマをさらに魅力的に!ちなみに完成イメージはこんな感じ。アーカイブのテンプレートを調整まとめフロントページは美しく機能的に冒頭で述べた通り、ブログのデザインは非常に重要な要素だと思っています。ブログを読みに訪れる読者さんに好印象を与えるのはもちろんですが、それだけではなく運営者のモチベーションの維持にも大きな影響を与えると考えているからです。整った綺麗なデザインであれば他が多少犠牲になってもいいかというと、そうではありません。デザインが整っていることは大切ですが、その一方で、そればかりにステータスを振りすぎると良くない場合もあります。機能性を失ってしまえば、ユーザーエクスペリエンスを損ねてしまいかねませんよね。フロントページはすべての記事の玄関である必要があります。この大前提を壊さないように、そのうえできちんと機能性を付加したカスタマイズを意識してつくりました。いった基本的な一覧を配置。下段にはカテゴリーごとの記事をランダムで紹介する仕様にしてあります。パラメータの設定次第で表示する記事数等を変更できますので、ご活用下さい。オリジナルのフロントページを作る手順オリジナルページ作成のための方法を、順を追ってを解説していきます。作業は必ず子テーマで行いましょう。子テーマでカスタマイズすることでテーマのアップデートの影響を受けにくく、万一テーマが壊れてしまった場合の復旧も容易になります。Postsの機能を利用しますので、インストール・有効化をして下さい。MEMOインストール・有効化がされていない場合は人気記事の表示はされませんが、全体的な表示崩れ等の心配はありません。全記事表示用のアーカイブページを作成フロントページをオリジナルのものにすると、当然ですが従来のフロントページは表示できなくなってしまいます。よめねこ別に問題なくない?はるしかいやいや、全記事一覧としての機能を失っちゃうんだよ。ページネーションがないでしょ?ということでまずは全記事を表示できるアーカイブページを作成します。いっても、やることは以下のコードを子テーマのfunctions.phpにコピペするだけ。);上記コードの4行目がアーカイブのURLになりますので、お好みで変更して下さい!上記の例だと、http://○○○.○○/archives_allのようなイメージになります。ファイルのアップロードが完了したら、管理画面の設定>パーマリンク設定で何も変更せずに保存して下さい。register_post_type_args:デフォルトのWordPress投稿(post)の一覧ページを表示するYAMATONAMIKI.COMこちらでも同じく4行目がアーカイブのURLになりますので、お好みで変更してみてくださいね。子テーマ内にテンプレートファイルを作成フロントページを表示する為のテンプレートファイルを作成します。SANGOには標準で何パターンか用意されてますので、そちらを少し改変して利用しましょう。親テーマフォルダ直下にあるpage-forfront.phpをコピーして、オリジナルの名前を付けます。僕はわかりやすくpage-forfront_custom.phpとしました。次に中身を書き換えていきます。ファイルをテキストエディタ等で開くと、上部にコメントが入っていると思います。デフォルトでは以下のような感じ。page*/この部分を、自分でカスタマイズしたことがわかるように書き換えましょう。page*/2行目の「トップページ用(マイカスタム)」の部分が変更箇所です。ここで書き換えた名前は、後で必要になるので覚えておきましょう!続いてページの中身を作っていきますね。以下の記述を探してみて下さい。SANGO1.3.1の時点では7行目にいると思います。class="page-forfront">こちらのdiv要素のクラス名を、以下のように書き換えます。class="page-forfront-custom">あとでカスタムフロントページのみにスタイルを適用したいので、そのための下準備がこれで完了しました。次にコンテンツ部分を書き加えていきます。以下の記述は今回不要なので、消してしまいましょう。</div>消した部分に、以下のコードをコピペします。-->ちょっと長いですね。何がどうなっているかはコメントである程度書いてありますので、なんとなく雰囲気はつかめるかと思います。クラス名や見出しの文言などをお好みで調整したら表示用のファイルは完成です!このファイルを子テーマ直下にアップロードしましょう。Postsを使いたくない!という方は、こちらの記事を参考にしてみて下さい!GoogleAnalyticsの統計で人気記事が生成できる超軽量WPプラグイン上段部分のコードを以下のような形に書き換えればOKです。);//フロント,アーカイブ用。前項で作ったファイルを反映させるための固定ページを作ります。パーマリンクは適当に/homeにでもしておくといいですね。“固定ページの属性”の、テンプレートの部分をクリックして下さい。作成したテンプレートファイルのコメント部分に書いた名前があるはずですので、それを選択します。ここまでできたらページを公開してしまいましょう。フロントページ専用のスタイルを追加フロントページのスタイルを調整するため、以下を子テーマのstyle.cssにコピペします。.25);}/*ENDカスタムフロントページのスタイル*/ちなみに、トップの”コンテンツ紹介”部分はヘッダーアイキャッチをスタイルで調整して使っています。ヘッダーアイキャッチを普通に利用したい場合、スタイルシートから以下の記述を削除して下さい。追記:見出し用のスタイルが漏れていたので追加しました。“見出しの基本スタイル“が追加部分になります。WordPressの設定でフロントページを切り替えここまでできたら、あとはWordPressの設定でフロントページを指定するだけです!管理画面のメニューから、設定>表示設定を選択。”ホームページの表示”で固定ページにチェックして、今回作成した固定ページを指定してあげましょう。設定できたら下部の”変更を保存”ボタンで適用します。ブログトップにアクセスしてみて下さい。ここまで問題なければ、表示がイメージ通りになっているはずです。お疲れさまでした!......の前にもう一仕事。手順1で全記事表示用のアーカイブを作成しましたね。実際にページにアクセスしてみましたか?......凄く違和感がありませんか?カテゴリーアーカイブとかに表示されるカードが出ちゃってますね(笑)よめねこアーカイブ:投稿って......かっこわるい!はるしか大丈夫、ちゃんと消せるから安心してね。今度は親テーマからarchive.phpをコピーしてきましょう。ファイルを開いて、次の記述を探して下さい。archive.phpget_template_part('parts/archive/archive-header');//ヘッダーこいつを投稿アーカイブの時は条件分岐で読み込まないようにします。上のコードを丸ごと書き換えて下さい。}これで安心、スッキリと表示されるので確認してみましょう。今度こそ、お疲れさまでした!!まとめ今回のカスタマイズ手順は少し大掛かりでしたね。普段phpをさわり慣れない方は、意味不明な文字の羅列にげんなりしたと思います。コピペだけでも完成はしますので、しっかり手順を踏んでやれば大丈夫ですよ。あとはコード中のコメントも見ながら調整して、満足のいくように仕上げていきましょう!ちなみに、僕が趣味で開発したSANGO専用プラグイン「SANGOサポーター」なら、この記事で紹介しているカスタマイズがワンクリックで完成しちゃいます!細かなデザインの調整もカスタマイザーから行えるようにしてありますので、もっと簡単にやりたい!という方は導入を検討していただけますと幸いです。:WordPress関連記事たちこの記事を書いた人はるしか雑食系サラリーマンゲーム・漫画・アニメ・クルマ・ガジェットなど多趣味な雑食系で、わからないこと・気になることがあればすぐ調べないと気が済まないタイプ。集めた知識を独自の観点でお伝えしていきます。2018はるしかさん、はじめまして。最近SANGOユーザーになったものです。さんのブログの「読み終える目安:**分」ですが、プラグインをお使いでしょうか?差し支えなければプラグインをご教示いただけますと幸いです。ブログ内でこの件について言及されていましたら、申し訳ございません。これからもブログ更新楽しみにしております。2018はじめまして、コメントありがとうございます!読了時間の目安ですが、当ブログの場合は直接プログラムを書いているのでプラグインは使用していません。デザインについてはマサオカブログさんの記事の読了時間をきれいに調整するSANGOカスタマイズを参考にさせて頂いてます。2019お礼いつもカスタマイズの記事でお世話になっております元気と申します。SANGOサポーターのおかげで、素敵なフロントページが出来ました。こちらの記事のフロントページが大変気に入ったので自分もチャレンジしてみようと思ったのですが、いくつかわからない点があって躓いております。基礎的なことになってしまうと思うのですが・・・。1の「全記事を表示できるアーカーイブページを作成」というのは投稿から新しい記事を作成するということですか?それとも固定ページから作成するということでしょうか?それでその作成したURLをハイライト部分に当てるということですか?すいませんが、時間の空いてる時にでも教えていただければ幸いです。2018わんるさん、はじめまして。ご質問ありがとうございます!さて、アーカイブの作成についてですが、投稿ページも固定ページも新たに作る必要はありません。1子テーマのfunctions.phpに、記事中に書かれたコードを追記してみて下さい。2追記できたら、WordPressのパーマリンク設定を”何も変更せずに”保存だけを行います。手順はこの二つだけでOKです。ハイライト部分のURL(当ブログの場合ですと、https://kojikalog.com/archives_all)でアーカイブにアクセスできるようになります。わかりづらい説明で申し訳ないです......。2018唐突な質問失礼いたします。1子テーマにコードをコピぺしても全記事一覧が404になってしまいます。ちなみにパーマリンクは何もいじらず更新しています。ハイライト部分のURLとはどこにあたるのでしょうか?2カスタムからサイドバーを表示するにチェックを入れても表示されないのですが、何が原因がわかりません。お手数ですが、返信を頂けると幸いです。素敵なカスタマイズありがとうございます。活用させていただいております。ひとつだけこちらが可能かどうか、ご教示いただけますでしょうか。・新着記事のところを「ピックアップ」などにして、こちらが指定した(カテゴリーばらばらの)特定の5記事を表示するようにしたいのですが、そういったことは可能でしょうか?わがまま申し上げますが、ご確認よろしくお願いいたします。2018ガンゾさん、コメントありがとうございます!当カスタマイズを活用していただけているようでうれしく思います!さて、新着記事の部分を特定の記事で固定したいとの事ですが、カテゴリーがバラバラでも投稿IDで指定してあげれば可能です。具体的に手順を説明しますと、1作成したphpファイル【page-forfront_custom.php】から、以下の記述を探して新着記事の部分を「ピックアップ」等に書き換える。ピックアップ</p>2すぐ下にある次の記述を書き換える。//投稿IDをカンマ区切りで指定する0,1,2,3,4);この部分の0~4の数字を、ピックアップとして固定したい投稿IDに書き換える。これで、ご希望の動作ができると思います。2018はじめまして、最高のカスタマイズをシェアしていただきありがとうございます!1点、教えてください。各カテゴリの間にある(「○○の他の記事」の下)すき間の間隔を広げたいのですが、どうしたら良いでしょうか?教えていただけたらうれしいです!!よろしくお願いします。2018ありがとうございます!!バッチリです。2018とても詳しい解説記事、ありがとうございます。2018コメントありがとうございます!通常通りにサイドバーを表示したいとの事で、少しだけテンプレートファイルの編集が必要になってきます。【page-forfront_custom.php】から、次の記述を探してみてください。id="main">これを、こんな風に書き換えましょう。cf">次に、サイドバーの出力をしてあげます。同じファイル内から、次の記述を探してください。</main>これの直後に、サイドバー出力用のコードを追加します。?>これで、サイドバーまで表示されるようになったかと思います。2018詳しく解説していただきありがとうございます。カスタマイズさせていただいたのですが、2つご質問があります。1.「新着記事」や「最近の人気記事」カテゴリーの「ゲーム」などといった見出し?の部分の文字色や文字の大きさを変えるにはどうしたらよろしいでしょうか?2.新着記事などの各項目にある記事カード?っていうんですかね?それが、なぜか2列になってしまいます。(新着記事で2列、最近の人気記事で2列、合計4列)そうなると、記事カードが小さくなってしまい、タイトルの表示も少なくなってしまいます。さんのサイトのように各項目1列にしたいのですが、どうしたらよろしいでしょうか?何卒宜しくお願い申し上げます。2018ハルヒトさん、等ブログのカスタマイズ記事を参考にしていただき、ありがとうございます!さて、ご質問についてですが1.見出しの文字調整について紹介しているフロントページでは、見出しのスタイルをcssにて指定しています。style.cssなどから以下の記述を探していただき、適宜変更して下さい。*/}2.記事カードが横並びになってしまう現象についてハルヒトさんのブログを直接見ていないので何とも言えませんが、カードに適用されるはずのスタイルが反映されていないことが原因と考えられます。記事中では、SANGOのカードにデフォルトで指定されているスタイルを上書きする為に、追加のクラスを付与しています。class="sidelong__article">my_custom_articleクラスを追加して、ここにスタイルを適用しています。class=)にクラスが適切に書かれているかをご確認下さい。解決できない場合、そのほかの原因としてキャッシュがイタズラしている可能性が考えられますので、ブラウザキャッシュのクリア等をお試しいただければと思います。素晴らしいトップページカスタマイズ記事の公開、本当に有難うございます。ここで一つ要望がございます。トップページの記事に表示される日付を更新日にし、かつ、検索エンジンにもそのように伝えるようなカスタマイズは可能でしょうか?もし可能であれば、ご教示いただけますと幸いです。2018けいしゅけさん、コメントありがとうございます!フロントページについてのご要望ですね。記事に表示される日付データを更新日のものにすることは可能です。【page-forfront_custom.php】から以下の記述を探してみてください。?>これをまるごと消してしまい、以下のコードをその場所に書き込みます。'</time>';}?>これで更新のある記事は最終更新日が表示されるようになると思います。参考になりましたら幸いです!※1.ちなみに検索エンジンに伝える件については、僕はあまりSEOに詳しくはないのでよく分かっていません。上記カスタマイズでtimeタグにも更新日が適用されるので、そこで効果がある可能性はありますが......。2018素敵なカスタマイズをシェアして頂きありがとうございます。今回、こちらのカスタマイズを一度、カスタマイズ前の状態に戻したいのですが、その場合は、やはりこちらのカスタマイズを一つ一つ消していくしかないのでしょうか?何か簡単に出来る方法があれば教えて下さい。2018コメントありがとうございます!当記事のカスタマイズを元の状態に戻す方法ですが、テンプレートファイルなどはそのままで設定画面から簡単に行えます。WordPress管理画面の左側[設定]->[表示設定]の順に進んでいただき、[ホームページの表示]項目で「最新の投稿」を選択し、保存して下さい。2018はじめまして!1.4.1バージョンですと、うまくいかず四苦八苦しております。しても、エラーが出てしまい、記述も違う場合が多くうまくいきません。>以下の記述を探してみて下さい。SANGO1.3.1の時点では7行目にいると思います。↑も1.41バージョンの場合、記述がなく>次にコンテンツ部分を書き加えていきます。以下の記述は今回不要なので、消してしまいましょう。記述も同じ記述がないので、自分なりに消して組み込んでもどうしてもエラーが出てしまいます。なにが悪いのか、ご教授頂けないでしょうか?お忙しいと思いますがよよろしくお願い致します。2018kohsukeさん、はじめまして。コメントありがとうございます!SANGO1.4.1で【page-forfront.php】の中身を確認しましたが、先頭のコメント行のみ変更になっているようです。page*/コメント行以外のコードは基本的に変更がないようですので、記事の通りの手順で問題なく実装できるかと思います。2018ご返事遅れて申し訳ございません。ありがとうございました!無事、編集できました。お手数お掛け致しました。綺麗なサイトで早速真似させてもらいました(笑)一つ質問させてください。Insightsを実施してみたところ、おそらく画像が原因で少々悪い点が出てしまいました。2018カプラさん、コメントありがとうございます!綺麗なサイトとは光栄です!PageSpeedInsightsで悪い点......ですか。参考までに、デフォルトのフロントページとの差がどれくらいだったかお聞かせいただくことは可能でしょうか?カスタムフロントページでは、SANGO標準の一覧レイアウト(横長タイプ)をそのまま流用していますので、差があるとすれば表示数が増えたことによるのではないかと推定できます。トップレベルカテゴリーの数が多いということもありませんでしょうか?ちなみに小さいサイズのアイキャッチ出力にできないこともないですが、functions.phpにそれ専用の関数の追加と画像リサイズが必要になってきますので、あまりオススメいたしません......。2018ご返信ありがとうございます!WordPressのホームページ設定より、ホームページの表示を”最新の投稿”にした場合は90点でして、”固定ページ”にして紹介されていたトップページにしたところ、72点になっていました。(ウィジットを少し減らして70->72となりました)ちなみに、変更後に表示されている画像は15個で最新の投稿にした場合は10個でした。画像の数が問題なのかな、とカテゴリごとに3件ずつ出しているものをカテゴリ毎に1件にし、合計9枚の画像を出して再度計測してみたのですが、同じく72点でした。2018連投すいません。その後プラグインなど入れて80点まであげることができました。”最新の投稿”にした場合は96点でした。2018うーん、どうなっているのでしょうね......?ちなみに当ブログのスコアはモバイルで88点ですが、画像に関しての項目は特に指摘されていないようです。参考までに、ブログのURLなど教えていただけたりはしますでしょうか?どこまでお力になれるかはわかりませんが......。2018ご返事ありがとうございます!そうなんてす。こちらのサイトもテストしてみたのですが点数はいいんですよね...。こちらが私のブログです。2018ブログ拝見させていただきましたが、過去記事の一部で画像がアイキャッチ用にリサイズされていないものが見受けられました。考えられる原因としては・初期は別テーマで運営していて、途中からSANGOテーマに変更した・FTP経由など特殊な方法で画像をアップロードしている・プラグインなどの機能でリサイズを停止しているなどがあります。Thumbnailsなどのプラグインでアイキャッチを再生成すると解消されるかもしれません。2018ありがとうございます!早速プラグインを入れて試してみました。結果は2点ほど上がったくらいでした。一度設定の見直しがてら、カテゴリごとの記事をランダムではなく”orderby=date”にしてみたり、不要なプラグインを消してみたりと試してみましたが、結果あまり点数には影響せず...。非同期にフォントを結合して読み込む。”にしたところ、99まであがりました。2018色々と検証していただきありがとうございました。Fontsだけでそこまで変わってしまうものなんですね。無事に解決できたようで安心しました!しかし99点......。Analyticsのjsやらを考えると事実上の満点とは、お見それいたしました。2018追記すいません。下記のようにコードをコピペしたのですが表示されませんでした。間違いがあればご指導お願いしたいです。2018おぎえもんさん、コメントありがとうございます!1について、記事の書き方がわかりづらくて申し訳ありません......。ハイライト部分というのは「archives_all」を指していて、この部分は基本的に変更せずに使っていただければ大丈夫です。ページ名となっていますので、全記事一覧のURLはhttps://ogiemon-affiliate.com/archives_allになります。全記事一覧のURLはhttps://ogiemon-affiliate.com/ichiranといった具合に変更できます。2について、カスタムからサイドバーを表示するにチェックというのがどこを指しているのかがイマイチわからず......申し訳ありません。このカスタマイズは基本的にサイドバーを表示しませんので、表示させるためには別途コードを追記していただく必要があります。方法は当記事のコメント欄にてご紹介してますので、参考にしていただければ幸いです。2018はるしかさんのおかげでサンゴのフロントページを変更することが出来ました。各カテゴリーの中の記事をランダムに抽出してくれるのは本当に素晴らしい。埋もれていた記事が出てきて私が喜んでしまいました。改善したい点がありますがやり方がどうにもわかりません。パソコンとスマホでは普通に表示されるのですが、iPadで見ると記事の見出しが途切れてしまい、しかも左右の記事がずれてしまい見苦しくなってしまいます。これは私だけなのかなと思ったのですが、こちらにコメントを残された方々のブログを見てもやはりiPadだと私と同じ現象でした。左に画像があり右に見出しが来てますが見出しが途中で「...」になりクリックしなければ見出しが見れない状態です。これを上に画像、下に見出しにして見出しも全て見せられるようにしたいと思っております。2018ほそほそさん、コメントありがとうございます!タブレット端末で表示が乱れてしまう件、こちらでもiPadで確認してみましたが、左右の記事がずれる現象は確認できませんでした。記事タイトルが途中で途切れて「...」となる部分に関しましては、SANGOの横長タイプの標準的な仕様ですので、ご容赦いただければと思います。ご指摘のように上に画像・下にタイトルといった形式ですと、記事タイトルの長さによっては左右の記事カードの高さにズレが生じる場合がありますので、あまりオススメできません。お力になれず、大変申し訳ありません......。2018はるしかさん返信ありがとうございました。SANGOサポーターのプラグイン、以前から持っておりまして、それを全く活かしきれておりませんでした(汗)大変申し訳ございませんでした。SANGOサポーターで色々とトップページをカスタマイズしたらiPadの問題も解決し、今では楽しくブログを書かせてもらっております♪しかしここでまた問題が発生してしまいました(泣)パソコンではサイドバーが出るのにスマホだとサイドバーが出ないという状態です。...もう少し調べてみますが、それでも駄目ならまたご相談させていただくことになるかもしれません。2018ほそほそさん、こんばんは。SANGOサポーターを導入されていたんですね、ご利用いただきありがとうございます!フロントページの件、解決できたようで良かったです。モバイル表示でサイドバーが出てこない問題は僕の方でも確認できております。これに関しては対策をとらせていただいている最中でして、次回アップデートにて解決できる見込みとなっております。ご不便をおかけしてしまい申し訳ありませんが、もう少しだけお待ちいただきますようよろしくお願いいたします。2018早速の返信ありがとうございます♪そうでしたか、私だけじゃなかったのですね。対策を講じられているとのこと、安心しました。2018先日のアップデートで、「モバイル表示でサイドバーが出てこない問題」が解決できるということでした。アップロードをしましたが、私のブログでは以前と変わらないままでした。2018ほそほそさん、申し訳ありません。追加のアップデートにて対応致しました!SANGOの詳細設定「モバイルでサイドバー非表示」と連動して表示/非表示できる仕様となっております。2018はるしかさんこんばんは。スマホでサイドバーの確認が出来ました。2019はるしかさん、こんばんは。うまく表示までできたのですが、トップページに特定のカテゴリーだけ表示させたくない場合はどのようにしたらよいのでしょうか?お時間ある時に教えてもらえるとうれしいです。2019ちゃんみおさん、コメントありがとうございます!ちゃんみおさんは確か、SANGOサポーターを導入して頂いてますよね?SANGOサポーターのフロントページ機能でしたら、【外観⇨カスタマイズ⇨SANGOサポーター⇨フロントページの設定】と進んでいただくと【カテゴリー別記事一覧のカテゴリーIDを指定】という設定項目があります。ここに「表示させたい」カテゴリーのIDをコンマ区切りで指定してあげてください。指定した順にカテゴリーの一覧が表示されると思います。「特定のカテゴリーだけ表示させたくない」とは少し異なってしまいますが、現状ではこれが最も近い方法かな、と思います。2019はじめまして!いつもお世話になっております。こんなに簡単に作れるなんて感動しております。2019あいすさん、コメントありがとうございます!特定のカテゴリーを指定した順番通りに表示させるカスタマイズは大変申し訳ありませんが、今のところ公開する予定はありません。僕が制作・販売しているSANGOサポーターでは、この記事で紹介しているカスタマイズをさらに細かく簡単に設定できるようになっています。2019助けてください。上記の通り設定した結果、なぜかヘッダーが2つ上下に表示されてしまいます。現在はSANGOサポーターの設定にしてヘッダーを1つにしています。上記のやり方の場合のみヘッダーが2つ上下に表示されてしまいます。SANGOサポーターを使ってサイドバーを表示する方法はないでしょうか?とても悩んでいます。早急に対応していただけると助かります。2019一利さん、コメントありがとうございます!サイトの方を拝見したところ、特にヘッダーが2つ表示されているようなことはないように見受けられます。サイドバーの方も僕の端末からはきちんと表示されているようですよ。SANGOサポーターをご利用の場合、こちらの記事のカスタマイズは必要ありませんので、functions.phpに書いたプログラムは削除していただいても問題ありません。2019ご丁寧にご回答いただきありがとうございます。すみませんが、私の「本名」がアイコンの横に出てしまっているみたいなので、別の名前(一利)とかに変えて頂けないでしょうか、あるいは削除でも大丈夫です。2019また前回に続き質問をさせてください。サイドバーにあるカレンダーを全投稿記事のH1タイトルの上に配置したいです。2019H1タイトルというのはブログタイトルのことでよろしいでしょうか?該当箇所にウィジェットエリアはありませんので、テンプレートファイルを編集していただくことになってしまいます......。柔軟な対応ができず申し訳ありませんが、ご理解いただけますと幸いです。コメントをキャンセルメールアドレスが公開されることはありません。