WordPressのコメント表示を2ちゃんねる風にする方法(stinger3をカスタマイズ) #stinger3

stinger3のカスタマイズ

このブログは、WordpressのテーマにSTINGER3を利用しています。

このstinger3は、デフォルト状態でSEOに最適化されており、無料で使えるテーマとしては最も人気の高いものの一つです。

stingerの人気の理由の一つにカスタマイズのしやすさがあります。WEB上にもstinger3のカスタマイズレポートが多数存在しています。ですので僕は、デフォルトのstinger3のコメント欄を、もっとシンプルなものにしたかったので、ネットで検索してみました。けれども思ったものがヒットしなかったので自分でカスタマイズすることにしました。

せっかく自分でカスタマイズするのなら、個人的には結構読みやすいと思っている2ちゃんねる風のコメント表示欄にしてみることにしました。(単に良いコメント欄デザインのアイディアがなかっただけ)

というわけで、デフォルトのstinger3からコメント欄を2ちゃんねる風にする方法です。デフォルトのstinger環境は、Cloud9でWordPressのテスト環境を作成して行っています。

スポンサーリンク
レクタングル(大)広告

WordPressでの設定

WordPress管理画面での設定です。

コメントの設定

匿名でコメント受け付けるには、Wordpressの「設定→ディスカッション」から「名前とメールアドレスの入力を必須にする」のチェックを外してください。

Wordpressのディスカッション設定から名前とメールアドレスの入力を必須にするのチェックを外す

テーマの設定

STINGER3ダウンロードページから、最新のstinger3をダウンロードします。今回この記事を書いたときの最新が「stinger3ver20140327」だったので、これをもとにカスタマイズします。

ダウンロードした「stinger3ver20140327.zip」をテーマのインストールからアップロードしインストールします。

テーマのインストール

stinger3子テーマの作成

変更部分は、すべて子テーマで行い、後からテーマをバージョンアップしても影響がないようにします。

そのために「Wordpressインストールフォルダ→wp-content→themes」の下に「stinger3ver20140327child」というフォルダを作成してください。

「stinger3ver20140327child」フォルダの下には、「comments.php」「functions.php」「style.css」の3つのファイルを作成してください。

構造的にはこのようになります。

子テーマを作成

子テーマの編集

style.cssの編集

フォルダとファイルを作成したら「style.css」を以下のように編集します。


重要なのは、以下の部分です。

Theme Nameには子テーマの名前。

Templateには親テーマの名前(親テーマのフォルダ名)

@import url(”);には、親テーマのstyle.cssへの相対パスを入力してください。

こうすることで、親テーマのデザインを引き継ぎつつ子テーマのstyle.cssに変更書き加えていくことができます。

CSSはとりあえず、それっぽく見えるようにしただけなので好みに合わせて編集してください。

comments.phpの編集

「comments.php」は次のように編集します。

wp_list_comments(‘callback=mytheme_comment’); は、コメントリストを読み込むときに「functions.php」にある「mytheme_comment関数」をコールバックします。

「comments.php」を子テーマ内に作ることによって、親テーマの「comments.php」は、上書きされ子テーマのものが使われます。

functions.phpの編集

子テーマの「functions.php」は、親テーマのものを上書きせず、親テーマの「functions.php」が呼び出されたあとに実行されます。

「functions.php」は、次のように編集します。

各関数は次のような役割になっています。

function rename_anonymousは、無記名のコメント投稿者名を変更する関数

function mytheme_commentは、コメント表示時に呼び出されるコールバック関数

コメント表示部分をカスタマイズがしたい場合は、mytheme_commentを編集してください。

僕としては、アバターと返信機能は特に必要ないと思っているので、取り外しました。

参考 コメントリストのカスタマイズ:WordPress | KH-WEBLOG

参考 WordPressのコメント欄を2ちゃんねる風にする+Ajax | pipilog(Internet Archiveのもの)

子テーマの適用

あとは、Wordpress管理画面にログインして、「外観→テーマ」と移動して、今回作成した子テーマ「stinger3ver20140327child」を有効化します。

子テーマの有効化

表示の確認

あとは、コメント欄の表示確認です。デフォルトで投稿されている『Hello world!』という記事に適当にコメントを投稿してみます。

次のように表示されました。

カスタマイズ後のコメント欄

1は、デフォルトで書き込まれているコメントです。一応それっぽいものが出来ました。

管理者としてログインしている場合は以下のように表示されます。

カスタマイズ後のコメント欄ログイン後

とりあえず、面倒くさい機能は省いて、なるべく手間をかけないようにやったらこんな感じになりました。

注意点

見た目は2ちゃんねる風ですが仕様は全然違うので注意してください。具体的には次のようなものが違います。

  • 番号は順番に振ってあるわけではなく<OL>タグです。なのでディスカッション設定でコメントを分割表示しているときには、意図通りに表示されないと思います。
  • <OL>タグを使用しているので、削除すると番号でレスされている場合は当然はずれます。削除時はコメントを消してしまわず「編集」から「削除しました。」などと入力する必要があります。
  • IDは、IPアドレスと日付を掛け合わせて作られてトリミングしてあるので、完全な一意性を確保出来るものではありません。
  • ダブルクォーテーションのアスキーアートはずれることも(Wordpressの仕様。ダブルコーテーションが置換される。 )
  • その他いろいろ

あくまで、「なんちゃって2ch表示」ということで。あと、コメントが荒れたときなどは、名前とメールアドレスの入力を必須にする設定に戻したりして、対策をしてください。(CSSでメール入力欄の表示をする必要有り)

拡張プラグイン

ここから機能を拡張するには次のプラグインが有効です。

コメントをもらった順にナンバリングするには、Greg’s Threaded Comment Numberingプラグインを使うといいそうです。プラグイン名でググルと使い方が出てきます。

書き込み時にページ変遷をしないで、Ajaxで投稿出来るようにするには、wp-comment-masterプラグインをインストールすると良いそうです。(※2年以上更新していないプラグインです)

まとめ

今回は、デフォルト状態のstinger3からのカスタマイズ方法を書いたので、カスタマイズ済みのstinger3から変更するには適時調整してください。

一応、このブログにも上記のコメント表示を適用してみました。

コメント表示の確認やテスト動作は一番下の方にあるのコメント欄にどうぞ。

※テーマ変更によりコメント欄のスタイルを変更しました

追記

スマホでの表示のことを完全に失念していたので、スマホでの追加カスタマイズ方法を以下の記事に書きました。

WordPressテーマstinger3のスマホ用コメント欄をカスタマイズして2ch風にする方法

『WordPressのコメント表示を2ちゃんねる風にする方法(stinger3をカスタマイズ) #stinger3』へのコメント

  1. 名前:名無しさん 投稿日:2014/04/10(木) 15:41:10 ID:d24835f49

    コメントはこのように表示されます。

  2. 名前:名無しさん 投稿日:2014/04/10(木) 15:44:32 ID:d24835f49

    改行文はこんな感じ。

    雨ニモマケズ
    風ニモマケズ
    雪ニモ夏ノ暑サニモマケヌ
    丈夫ナカラダヲモチ
    慾ハナク
    決シテ瞋ラズ
    イツモシヅカニワラッテヰル

  3. 名前:名無しさん 投稿日:2014/04/11(金) 00:27:00 ID:e38fe0ae6

    テスト

  4. 名前:テスト 投稿日:2014/04/11(金) 06:24:28 ID:efef1ae8a

           ∧  ∧
           |1/ |1/
         / ̄ ̄ ̄`ヽ、
        /        ヽ
       /  ⌒  ⌒    |
       | (●) (●)   |
       /          |
      /           |
     {            |
      ヽ、       ノ  |
       ``ー――‐””   |
        /          |
       |          | |
       .|        |  | |
       .|        し,,ノ |
       !、          /
        ヽ、         / 、
         ヽ、  、   /ヽ.ヽ、
           |  |   |   ヽ.ヽ、
          (__(__|     ヽ、ニ三

  5. 名前:名無しさん 投稿日:2014/04/15(火) 17:14:12 ID:0242820e4

    とっても役に立ちました。
    ありがとうございます。

    しかしスマホから見るとコメントの番号が表示されないようです…

  6. わいひら 名前:わいひら 投稿日:2014/04/15(火) 19:36:51 ID:1f5cbfe33

    >>5
    このサイトのスマホ表示を修正してみました。
    やり方は、近日中に記事にしますね。

  7. わいひら 名前:わいひら 投稿日:2014/04/16(水) 19:53:58 ID:44dec6184

    スマホでのカスタマイズ方法を書きました。

    WordPressテーマstinger3のスマホ用コメント欄をカスタマイズして2ch風にする方法
    http://nelog.jp/stinger3-comments-to-2ch-smart-css

  8. 名前:名無しさん 投稿日:2014/04/17(木) 17:48:22 ID:57c00315f

    >>7

    わざわざ対応してくださってありがとうございます!読ませていただきます!

  9. 名前:名無しさん 投稿日:2014/11/12(水) 03:43:28 ID:9fe35fa1d

    質問をさせてください。
    こちらの掲示板の設定を参考にさせていただいたのですが、
    【Greg’s Threaded Comment Numbering】プラグインのところがわかりません。
    ぐぐってみたところ、
    comments.php内をwp_list_comments() ⇒ wp_list_comments(‘callback=gtcn_basic_callback’)
    に変更となっていましたが、すでに下記のようにタグが入ってしまっています。

    どのように書けば反映されるようになりますでしょうか?
    お忙しいところ大変お手数ではございますが、お返事いただけますよ幸いです。

  10. わいひら 名前:わいひら 投稿日:2014/11/12(水) 12:11:37 ID:534d8607f

    下記のタグというのが、ちょっとわからないですが、こちらの記事が参考になるかもしれません。
    インターネットアーカイブの記事でちょっと古いです。
    WordPressのコメント欄を2ちゃんねる風にする+Ajax | pipilog
    僕もだいぶ前の記事なので、かなり忘れています。