今までのお仕事履歴 & まったりお仕事募集中♪

【ひとかぶIPO対応】SBIネオモバイル証券口座を開設して、高配当株を買ってみた【初心者おすすめ】

【あつ森】あつまれどうぶつの森 プレイ日記集【スローライフ】

【転職・就活】独立系? メーカー系? エンジニア(ソフトウェア開発)はどっちが良い?【ユーザー系もちょこっと】

【おすすめ】実際に使ってみた白髪隠し5選レビュー【1本2本のちょろりとした白髪に】

【Cocoon】トップページをサイト型にカスタマイズしました【WordPress】

ブログ関連
スポンサーリンク

以前からやってみたいと思いつつ、出来ていなかったトップページをサイト型へとカスタマイズしてみた。

ちなみにわたくし、エンジニアではあるがWebエンジニアではないので、カンヒラメキセンス()のみでカスタマイズしている。なので、あくまでも参考程度に。

スポンサーリンク

「サイト型」へのカスタマイズ方法

参考にさせて頂いたサイト様

ぽんひろ.com(ぽんひろ様)のこちらの記事を参考にさせて頂いた。

わか
わか

有難うございますっ!!!

基本的には、ぽんひろ様のコードを参照にカスタマイズしていけば良い。

とても簡単に出来たが、(なまじ中途半端に知識があった故に)幾つか嵌ったポイントがあったので以下で紹介させて頂こうと思う。

公開設定したのにページが意図した表示とならない

めちゃくちゃ嵌った。

結論から言うと「STEP6:固定ページをトップページに設定」まで、しっかりやらないと反映されない。

わか
わか

念のため、トップページに設定する前にレイアウト確認したいな……固定ページを公開設定して……と。あれ、反映されない! なんで!?

エンジニアらしくデバッグをした結果、コード中にある「.home #main」がどうも関係していることを突き止めた。きちんとは調べてないが恐らく、トップページのみの指定という感じなのではと思う。

わか
わか

だから、トップページに適用しないと反映されないのか……

固定ページのままでも「.home #main」部分を削除すれば反映されるが、そうすると「h1」の部分が、あらぬところに影響が出るハズである。

また、ひとつ勉強になった。

新着記事のURLが分からない!

上記操作でトップページを投稿記事から作成した固定ページへと変えたワケだが、さて今まであった新着記事は何処いった!? 状態となった。

わか
わか

行方不明やん……(新着記事の「もっと見る」リンクが貼れない)

と、言うワケで色々と調べた結果、こちらの記事の「投稿アーカイブを有効にする」で新着記事ページを作成し、そちらへのリンクを張ることで解決した。

これが正しい方法かは不明である。適切ではない場合はそっと教えてほすぃ。

最後にfunction.phpにコードを追加後、設定 → パーマリンク設定 → 変更を保存をしないと反映されないので注意!

更にステップアップして、見出しのカスタマイズをしてみよう

わか
わか

見出しのh1を無くして、見出しのh2をトップ独自のにしたいなぁ

今はざっくりこんな感じなので

style.cssの方に定義した見出しh1スタイルを削除し

/* 削除!(実際に削除しても良い)*/
/*
.home #main h1{
font-size: 1em;
color: #555;
letter-spacing: 1px;
margin: 1em 0 -2em;
font-weight: 400;
display: flex;
align-items: center;
}
.home #main h1:before, .home #main h1:after {
content: "";
flex-grow: 1;
height: 1px;
background: #aaa;
display: block;
}
.home #main h1:before {
margin-right: .4em;
}
.home #main h1:after {
margin-left: .4em;
}
*/

次に、固定ページのタイトルを削除!

上のh1のコードにならって、style.cssの方に見出しh2のスタイルを追記

.home #main h2{
color: black;
position: relative;
background: #f1f8ff;
padding: 0.25em 0.5em;
border-left: solid 2em #5c9ee7;
}
.home #main h2:before {
font-family: "FontAwesome";
content: "\f040";
position: absolute;
padding: 0em;
color: white;
font-weight: normal;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

きちんと適用されていれば、冒頭にペンのアイコンがついた青系の見出しが表示されているハズだ。
見出しデザインは「サルワカ」さんを参考にさせて頂いた。

補足:FontAwesomeについて

Cocoonが使用しているFontAwesomeは4.7.0と若干、バージョンが古い。
ついつい何処を見るのか忘れてしまうので、メモしておく。

  • 公式サイトを開く
  • メニューの「Icons」をクリック
  • 検索バーに表示したいアイコン名を英語で入力(鉛筆なら「pen」と入力)
  • コードを参照 ※抜粋箇所は下記イメージ参照

サイト構築にあたって今後やりたいこと

  • ローカルにwordpress環境構築したい
  • アドセンスの自動広告を制御できないか

ローカルにwordpress環境構築したい

さくらインターネット(ライト)+SQLite環境なので、管理者画面がやはり微妙に重い。

なのでローカル環境を構築して、動作確認してから本サイトに適用する方法にしようかなと考えている。以下のサイトが参考になりそうだ。

今更だけどDockerでWordPress環境を用意してみたら超簡単だった

わか
わか

後で試しに導入してみよう(公私共々、Qiitaには足を向けて寝られない)

アドセンスの自動広告を制御できないか

最近、勝手に自動広告がオンになったのだが、幾らアドセンスの設定で表示したくない箇所についての表示を削除してもまったくきかなくて、自動広告をオフにした。

わか
わか

ヘッダ下へのでかい広告だけは勘弁してくれ(泣)

恐らく、そこを削除すると他の箇所に最適に広告を表示できる箇所がないからなのだろうが……ヘッダは全てのページに表示されるので、その設定だけは許容できない。

まだ、試してないがトップ系のみ自動広告除外設定、記事の方でヘッダ削除すればうまくいくのかもしれない。

わか
わか

失敗すると、一日ぐらい変なところに自動広告表示されそうで怖い

まとめは特にない。ではでは、この辺で!

コメント