Cocoonに変更してからやったカスタマイズ

wordpress

Simplisity2からCocoonへ変更した記事とその後に追加や変更した箇所などの備忘録記事
殆どのものがSimplicity2の時に使っていた物の流用ですけどね
どこをどう弄ったっけかな?となったりするので、自分用って感じですかね
simplicity2からcocoonへ | 楽しみのない猫

simplicity2からcocoonへ
ブログのテーマをSimplicity2からCocoonへ変更した記事です
Sponsored Link

phpファイル群

functions.php

自サイトで使っているアマゾンのサーチウィジェット用コードを
子テーマ内にあるFunctions.phpへ追加
WordPressでAmazonサーチウィジェットを複数の検索条件からランダムに表示させる

WordPressでAmazonサーチウィジェットを複数の検索条件からランダムに表示させる
何故「Amazonサーチウィジェット」なのか Amazonアソシエイトのウィジェット機能をご存知でしょうか? Amazonの広告は、自分で広告に使う商品を選ぶのが一般的な方法ですが、 ウィジェット機能は、自動的に商品を選・・・

こちらのサイトの物を使わせていただいてます、感謝!

次にコメント欄部分の調整コード
以下のコードで出来る事はウェブサイト欄の削除とコメント入力欄を下に持っていくこと

// コメントからウェブサイトを削除
function my_comment_form_remove($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'my_comment_form_remove');

// コメント入力欄の表示順を変更する
function wp34731_move_comment_field_to_bottom( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  
  return $fields;
}
add_filter( 'comment_form_fields', 'wp34731_move_comment_field_to_bottom' );

WordPressでコメント欄の不要な項目を削除したりカスタマイズをする方法【初級編】 | oku-log

WordPressでコメント欄の不要な項目を削除したりカスタマイズをする方法【初級編】 | oku-log
WordPressで投稿記事の最後に表示されるコメントフォームを含むコメント欄。デフォルトだと見た目も機能的な部分もイマイチなんですよね。きちんと使えるコメント欄を設置するにはいくつかのファイルをカスタムをする必要があります。今回はコメント欄の不要な項目を削除したりカスタマイズする方法を紹介します。

ここはこちらのサイトのコードを使わせていただきました

footer.php

PageSpeed Insights

PageSpeed Insights

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
部分にあったcssファイルの部分をグーグル先生に聞いて出てきた記事を参考に移動させました

</html>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

参考にした記事にも書いてあったのだけど、html表記?の外に出しちゃってもいいの?と思いましたw
普通に読み込まれますし、こうする事で改善の部分に出てこなくなりました

breadcrumbs.php

パンくずリストのホームだけ日本語表記が気になったので英語表記に変更

- ( 'ホーム', THEME_NAME ).
+ ( 'home', THEME_NAME ).

footer-meta.php

Simplicityにあった投稿者リンクをツイッターIDヘ置き換える設定が見当たらなかったので
とりあえずコードを書き換えて対応

- <a href="<?php echo $url; ?>" class="author-link">
+ <a href="https://twitter.com/twitterID" target="_blank" rel="nofollow">
この部分は最新版のCocoonだとメニュー ユーザー プロファイルにある
プロフィールURLに指定したいものを入れるとそのリンクに変わるようになっているようです
例えばプロフィールページ(/profile)など

sns-follow-buttons.php

フォローボタンにあるサイト用コードを削除しました

- <?php if ( get_the_author_website_url() )://ウェブサイトフォローボタンを表示するか ?>
-    <a href="<?php echo get_the_author_website_url(); //ウェブサイトフォローIDの取得?>" class="follow-button website-button website-follow-button-sq" target="_blank" title="<?php _e( '著者サイト', THEME_NAME ) ?>" rel="nofollow"><span class="icon-home-logo"></span>l</a>
-  <?php endif; ?>

mobile-menu-buttons.php

モバイルメニューのメニュー表記を英語へ変更

- <?php _e( 'メニュー', THEME_NAME ) ?>
+ <?php _e( 'menu', THEME_NAME ) ?>

こんな感じに表記部分を変更しました

breadcrumbs.php、sns-follow-buttons.php、mobile-menu-buttons.php、footer-meta.phpは
子テーマディレクトリへ入れても適用されなかったので
親テーマ tmp へ上書きしました

cssファイル群

amp.css

AMP(Accelerated Mobile Pages)用に変更しておきたい部分のコードを追加

body {
    color: #616161;
}

/* カードタイプリンクのホバーエフェクト */
.a-wrap:hover {
    background-color: #f2fcff;
    transition: all 0.8s ease;
}

/* グローバルメニュー */
.navi-in>ul li {
    height: 35px;
    line-height: 35px;
}

/* logo */
.logo, .tagline {
    position: absolute!important;
    top: 0;
    text-align: left;
    padding: 5px 10px;
    font-family: "Rounded Mplus 1c";
}
.tagline {
    position: absolute!important;
    top: 40px;
}

/* profile image */
.pf_img {
    border-radius: 10px;
}

/* トップメニューカテゴリフォント */
.item-label {
    font-family: 'Raleway', sans-serif;
}

/* マーカー色など */
.marker-blue {
  background-color: #b5e8ff;
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #b5e8ff 60%);
}

/* バッジのスタイル */
.badge, .sankou, .sanko, .reffer, .ref {
    color: #555;
    background-color: #89dbf2;
    padding: 2px 6px 1px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.07em;
    margin-right: 6px;
}

/* インデックスのカテゴリフォント */
.cat-label {
    font-family: 'Raleway', sans-serif;
}

/* 文中タイトルタグ */
.article h2 {
    background-color: #e7e7e7;
    border-left: 0 none;
    color: #888;
    padding: 15px 30px;
}
.article h3,
#comment-area h3 {
    color:#444;
    font-size:20px;
    border-top: none !important;
    border-right: none !important;
    border-left: 10px solid #bababa;
    border-bottom:3px solid #bababa;
    padding:3px 10px 3px;
}
.article h4 {
    color:#666;
    font-size:18px;
    padding: .25em 0 .25em .75em !important;
    border-left: 8px solid #ddd !important;
    border-top: none !important;
    border-bottom: none!important;
}
.article h5 {
    color: #888;
    font-size: 16px;
    border-bottom: 3px solid #e8e8e8;
    padding: 0 5px;
}
.sidebar .sns-follow-buttons a {
    width: 45px;
}

/* side barの装飾 */
#sidebar h3{
    margin: 0 0 1.5em;
    padding: 0.4em;
    border-bottom: 3px double #9ed1fc;
    font-size: 1.143em;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
#sidebar {
    background-color: transparent;
}
.sidebar .sns-follow-buttons a {
    width: 45px;
}

/* 新着・人気記事関連 */
.widget-entry-cards .widget-entry-card {
    border: 1px solid #d5d5d5;
}
.widget-entry-card-title,
.popular-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 5px 3px;
}

/* ランク表示位置とサイズ調整 */
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before {
    left: 4px;
    top: 4px;
    padding: 4px 10px;
    border-radius: 5px;
}

/* footer */
.footer {
    background-color: #ececec;
}

/***** レスポンシブデザイン *****/
/* 768px以下 */
@media screen and (max-width: 768px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

/* 480px以下 */
@media screen and (max-width: 480px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

style.css

Simplicity2で変更していた部分の追加とクラス名の変更など
(一部は要らない、機能していない部分もあるかも…)

/***** オリジナル *****/
body {
    color: #616161;
}

a:hover {
    color: #4489ff;
}

/* カードタイプリンクのホバーエフェクト */
.a-wrap:hover {
    background-color: #f2fcff;
    transition: all 0.8s ease;
}

/* グローバルメニュー */
.navi-in>ul li {
    height: 35px;
    line-height: 35px;
}

/* ロゴを左上へ */
.logo, .tagline {
    position: absolute!important;
    top: 0;
    text-align: left;
    padding: 5px 10px;
    font-family: "Rounded Mplus 1c";
}
.tagline {
    position: absolute!important;
    top: 40px;
}

/* プロファイルアイコンの角を丸める */
.pf_img {
    border-radius: 10px;
}

/* 水平線に色付け */
hr {
    height: 1px;
    background-color: #63adf9;
}

/* トップメニューカテゴリフォント */
.item-label {
    font-family: 'Raleway', sans-serif;
}

/* パンくずリスト */
.breadcrumb {
    margin-top: 10px;
    font-family: 'Raleway', sans-serif;
}

/* 本文記事タイトルフォント */
h1.entry-title {
    font-family: "Rounded Mplus 1c";
}

/* カテゴリタイトルをウェブフォント化 */
#archive-title {
    font-family: 'Raleway', sans-serif;
}

/* カスタム ブログページタイトル用 */
.archive-title_ct {
    background-color: #eee;
    padding: 3px 10px;
    border-radius: 5px;
    font-family: 'Raleway', sans-serif;
}

/* マーカー色など */
.marker-blue {
  background-color: #b5e8ff;
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #b5e8ff 60%);
}

/* バッジのスタイル */
.badge, .sankou, .sanko, .reffer, .ref {
    color: #555;
    background-color: #b5e8ff;
    padding: 2px 6px 1px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.07em;
    margin-right: 6px;
}

/* インデックスのカテゴリフォント */
.cat-label {
    font-family: 'Raleway', sans-serif;
}

/* インデックスタイトルフォントサイズ */
.entry h2 a {
    color:#444;
    font-size:22px;
    text-decoration:none;
    font-weight:bold;
}

/* タグクラウド */
.tagcloud a:hover {
    background: #f2fcff;
    color: #44a8d6 !important;
}

/* 文中タイトルタグ */
.article h2 {
    background-color: #e7e7e7;
    border-left: 0 none;
    color: #888;
    padding: 15px 30px;
}
.article h3,
#comment-area h3 {
    color:#444;
    font-size:20px;
    border-top: none !important;
    border-right: none !important;
    border-left: 10px solid #bababa;
    border-bottom:3px solid #bababa;
    padding:3px 10px 3px;
}
.article h4 {
    color:#666;
    font-size:18px;
    padding: .25em 0 .25em .75em !important;
    border-left: 8px solid #ddd !important;
    border-top: none !important;
    border-bottom: none!important;
}
.article h5 {
    color: #888;
    font-size: 16px;
    border-bottom: 3px solid #e8e8e8;
    padding: 0 5px;
}

/* sitemap用 */
div.wsp-container > ul.wsp-posts-list>li {
    list-style-type: none;
}
div.wsp-container strong.wsp-category-title {
    display: block;
    border-left: 5px solid #bdbdbd; 
    padding: .5em;
    background: #f5f5f5;
}
div.wsp-container strong.wsp-category-title a {
    text-decoration: none;
}
div.wsp-container > ul.wsp-posts-list {
    padding: 0;
}
strong.wsp-category-title {
    font-size: 140%;
    font-family: 'Raleway', sans-serif;
}

/* read more */
.entry-read {
    text-align: right !important;
    margin-right: 12px !important;
}

/* リストのカテゴリ表示 */
.hover-card .category {
    text-decoration: none;
}
span.post-date, span.category, span.post-update {
    font-family: 'Share Tech Mono', monospace;
}

/* 関連記事 */
#related-entries h2 {
    color: #616161;
    font-weight: bold;
    position: relative;
    margin-bottom: 15px;
    font-size: 150%;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'Raleway', sans-serif;
}
.related-mini-card .related-entry-card-title {
    color: #6f6f6f;
}

/* side barの装飾 */
#sidebar h3{
    margin: 0 0 1.5em;
    padding: 0.4em;
    border-bottom: 3px double #9ed1fc;
    font-size: 1.143em;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
#sidebar {
    background-color: transparent;
}
/* フォローボタン */
.sidebar .sns-follow-buttons a {
    color: #666;
    background-color: #fff;
    height: 40px;
    width: 40px;
}
.icon-twitter-logo:hover {
    color: #629eec;
}
.icon-flickr-logo:hover {
    color: #dc397f;
}
.icon-pinterest-logo:hover {
    color: #c40026;
}
.icon-amazon-logo:hover {
    color: #e79e34;
}
.icon-feedly-logo:hover {
    color: #68b059;
}
.icon-rss-logo:hover {
    color: #ec9800;
}

/* 新着・人気記事関連 */
.widget-entry-cards .widget-entry-card {
    border: 1px solid #d5d5d5;
}
.widget-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 5px 3px;
}
.popular-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 5px 3px;
    color: #616161;
}
.widget-entry-cards .a-wrap {
    margin-bottom: 10px;
    padding: 2px;
}

/* ランク表示位置とサイズ調整 */
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before {
    left: 2px;
    top: 2px;
    padding: 4px 10px;
    border-radius: 5px;
}

/* ブログカードの調整 */
.blog-card{
    margin: 10px 20px;
}
.hover-card .blog-card-title {
    color: #414141;
}
.blog-card-excerpt {
    color: #616161;
}
/* SNSフォロータイトル */
.sns-follow-message {
    text-align: left;
}

/* コメントフォーム */
#comment-title {
    font-family: 'Raleway', sans-serif;
}
input[type='submit'], #bbp_reply_submit,
.bp-login-widget-register-link a {
    width: 175px;
}

/* footer */
.footer {
    background-color: #ececec;
}

05/12追記フォローボタン部分やその他変更などで入れ替えました

style.css レスポンシブ部分

最初の方に貼ってある simplicity2からcocoonへ 記事でも書いてありますが
レスポンシブでのモバイル表示用コード

/* 1240px以下 */
@media screen and (max-width: 1240px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

/* 1030px以下 */
@media screen and (max-width: 1030px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

/* 768px以下 */
@media screen and (max-width: 768px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

/* 480px以下 */
@media screen and (max-width: 480px){
    .mobile-menu-buttons {
        position: fixed;
        top: 0;
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
}

480px以下の部分だけでも良さそうではあるけど、一応全部へ追記してあります

おわり

大体こんな所かな?まだここをこうしたい、という部分はありますけどね
備忘録というなの記事でグーグル先生に聞けば一杯出てくるようなカスタマイズですが
誰かの参考になれば幸いです

最後にカスタマイズ記事をポストしてくれている先人さん達に感謝!

[share]