Cocoonコメントフォーム周りのカスタマイズ

wordpress
この記事は 約6分 で読めます。

cocoonのというかwordpress自体かな?のコメントフォームって
サイズが大きめだし表示されっぱなしなのが気になっていて
ここをどうにか出来ないかなーと色々やってたんですが
ようやくこんな感じかなーと言う具合に出来たので備忘録記事を残しておきます
使用テーマCocoon | SEO・高速化・モバイル最適化済みの無料WordPressテーマ

Sponsored Link

やりたい事

表示されたままの状態のコメントフォームを隠してトグルスイッチ化したい
一番下の置いてあるとはいえ、常にサイズの大きなフォームが出っぱなしなのは
かなり気になっていたので、この部分を普段は隠しておきたかった

こんな感じですしねー

修正とコード

グーグル先生に聞いて出てきたサルワカさんの記事を使わせて貰いました
HTMLとCSSだけ!要素の表示・非表示を切り替える方法

HTMLとCSSだけ!要素の表示・非表示を切り替える方法
HTMLとCSSだけで表示・非表示を切り替える方法を解説しました。jQueryなしでも簡単に実装することができます。また、アイコンをクリックと同時に変える方法も紹介しています。

HTMLの部分をcomments.phpへ追加して、cssの部分は子テーマのstyle.cssへ追加です
サルワカさんの記事にも書いてありますが、HTMLとCSSだけで切り替える方法なので
そのままAMP対応ページにも使えるそうです

comments.phpの修正

まずはフォーム部分を形成しているcomments.phpの修正をします

-     //通常ページ
-    comment_form($args);

この部分を下のように変更します

//通常ページ ?>
<div class="hidden_box">
    <input type="checkbox" id="label" />
    <label for="label">Open comment form</label>
    <div class="hidden_show">
        <?php comment_form($args); ?>
    </div>
</div><?php

phpの閉じタグと開始タグは半角です…置き換えられちゃうので仕方なく(;・∀・)
隠したい部分(ここではデフォルトのコメントフォーム部分)を挟む感じです

コメントアウト部分の最後に閉じタグ、</div>の後に開始タグを付けないとエラーを吐きます

style.css

ボタンの装飾や表示の切り替え部分を追加します


/* フォームを隠す処理 */
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box input[type="checkbox"] {
    display: none;
}

/* この部分で中身表示 */
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/* フォームボタン用 */
.hidden_box {
    display: inline-block;
    position: relative;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #666;
    transition: .4s;
    font-family: 'Raleway', sans-serif;
}

.hidden_box label {
    font-weight: 700;
}

.hidden_box label:hover {
    color: #8ecdf0;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.hidden_box:before,
.hidden_box:after {
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.hidden_box:before{
  border-left: solid 1px #8ecdf0;
  border-top: solid 1px #8ecdf0;
  border-bottom: solid 1px #8ecdf0;
  left: 0;
}
.hidden_box:after{
  content: '';
  border-top: solid 1px #8ecdf0;
  border-right: solid 1px #8ecdf0;
  border-bottom: solid 1px #8ecdf0;
  right: 0;
}

HTMLの部分、CSSの部分共にサルワカさんの記事に詳しい説明が書いてありますので
詳しく知りたい方はそちらを確認してみてください

フォームを隠す処理部分の.hidden_boxにはinput[type=”checkbox”]を付けないと
必要な部分(他の要素のインプット部分)まで消えますので注意です
修正と追加が終わったらFTPで子テーマへアップロード

完成

上記部分を終わらせるとこんな感じになります

閉じている状態


フォームを出した状態


出来ればリストの部分も普段は隠しておきたかったんだけど、ちょっとそこまでは無理でした
画像はリスト部分がある状態ですが、これでもかなりスッキリしました
意図せずフォームの幅も小さくなったので満足です (一応コメント入力部分で広げることも出来ました)

おわり

当初はコメントフォームプラグインを使っていたんだけど、いつの間にかフォーカスしても
名前部分や送信ボタンが出てこなくなっちゃってデフォルトのフォームを使ってましたが
これで満足行くスタイルに出来ました(もう少し調整が必要な気はしますが)

うちのサイトではあまり使われる事はないけど、ずっと表示されたままよりは
隠しておいてスッキリさせてた方が見た目も良いですしね

何かあっても責任は取れませんが、もし同じような事をしたいと思ってる人の参考になれば!

作業する時はしっかりとバックアップを取ってから行いましょう

追記デフォルトのコメントフォームに戻してカスタマイズしました
wordpressコメントフォーム周りのカスタマイズ | 楽しみのない猫

wordpressコメントフォーム周りのカスタマイズ
名前とメールアドレス欄の並列化、ウェブサイト欄の削除、コメント入力欄の場所移動、文面の変更などコメントフォーム周りのカスタマイズ記事です

Comments

  1. 通常ページは特に問題ないけど
    AMPページだと元々閉じられてるものを開くとこの状態がまた出てくるって形になっちゃうんだよなぁ…