コメント欄を下へ移動する方法を教えましょう
記事の内容
こんな方におすすめ
- コメント投稿欄を関連記事の下に移動したい
- 『css』や『php』『FTP』って何？おいしいの？
コメント投稿欄を関連記事の下に移動する作業
アフィンガー子テーマのファイルを確認
アフィンガー子テーマに『single.php』『single-type1.php』『single-type2.php』という３つのファイルを新規に作成
アフィンガー親テーマの『single.php』『single-type1.php』『single-type2.php』の内容を子テーマにコピー
コピーした内容の一部分を書き換える
以上4工程の作業になります。
プログラムの知識が無い方にもわかるように、作業ごとに画像を使って丁寧に説明していますが、作業結果に関してはくれぐれも自己責任でお願いします。
わたしはアフィンガー6とエックスサーバーを使っています。
同じ環境の方であればこの記事の内容を真似するだけで、プログラムやFTPなどの知識が無くてもコメント投稿欄を関連記事の下に移動させられます。
違うサーバーを使っている方は、新たにファイルを作成する方法が多少違うかもしれませんが、ワードプレスでの作業は同じなので参考になると思います。
また、すでに他のカスタマイズでアフィンガー子テーマに『single.php』『single-type1.php』『single-type2.php』のファイルがある場合は上記 Step 2 と Step 3 の作業は必要ないので、 Step 4 からの作業になります。
Step 1：子テーマのファイルを確認
作業に入る前にアフィンガー子テーマを確認してみましょう。
アフィンガー管理画面で【外観】をクリックします。
続けて【テーマファイルエディター】をクリック。
わたしのようにまだphpファイルを操作していない方は、テーマファイル欄に『single.php』『single-type1.php』『single-type2.php』というファイルは無いと思います。
そういう方は Step 2 からの作業になります。
以前にphpファイルを書き換えるなどのカスタマイズをして『single.php』『single-type1.php』『single-type2.php』というファイルがテーマファイル欄にある方は Step 4 からの作業になりますので、Step 2 、Step 3 は飛ばしてください。
それでは早速作業に入りましょう。
Step 2：phpファイルを新規に作成
まずはアフィンガーの子テーマに３つのファイルを作ります。
エックスサーバーのファイルマネージャーにログインします。
カスタマイズするサイトのフォルダーをクリック。
【public_html】をクリック。
【wp-content】をクリック。
【themes】をクリック。
【affinger-child】をクリック。
これがアフィンガー6の子テーマのフォルダーとファイルです。
アフィンガー6の子テーマに３つのファイルを新規に作ります。
左上の【新規ファイル】をクリック。
新規ファイル作成ウインドウが開くので、ファイル名を入力する欄に『single.php』と入力して【作成】ボタンをクリック。
『single.php』というファイルが追加されました。
続けて２つ目のファイルを作ります。
同じく【新規ファイル】をクリックして新規ファイル作成ウインドウを開きます。
今度はファイル名入力欄に『single-type1.php』と入力して【作成】ボタンをクリック。
『single-type1.php』というファイルが新規に作られました。
もう一度同じ作業で３つ目のファイルを作ります。
【新規ファイル】をクリックして新規ファイル作成ウインドウを開き、今度はファイル名入力欄に『single-type2.php』と入力して【作成】ボタンをクリック。
これでアフィンガー6の子テーマに『single.php』『single-type1.php』『single-type2.php』という３つのファイルが追加されました。
ワードプレスの管理画面で【外観】をクリック。
続けて【テーマファイルエディター】をクリックします。
『テーマを編集』の画面に入るので『AFFINGER Child』のテーマファイル欄に『single.php』『single-type1.php』『single-type2.php』の３つのファイルが表示されていればＯＫです。
エックスサーバーでの作業はこれで終了です。
エックスサーバー以外のサーバーを使っている方もこの３つのファイルをアフィンガー6の子テーマに追加してください。
方法が分からない時はグーグル先生に聞けば、誰かしらが教えてくれると思います。
Step 3：phpファイルのコードをコピー
『テーマを編集』の画面で右上の【編集するテーマを選択】をクリックします。
プルダウンメニューが表示されるので【AFFINGER】をクリック。
【AFFINGER】になっている事を確認して【選択】ボタンをクリック。
アフィンガー親テーマへ移動しました。
右側にテーマファイルが並んでいるので、下へスクロールして【single.php】をクリック。
選択したファイルの内容が表示されます。
まずはマウスポインターをコードが書かれいてるエリアへ移動してクリックします。
カーソルがコードの書かれいてるエリアで点滅するので、【ctrl】+【A】でコード全てを選択した状態にします。
この状態で【ctrl】+【C】でコードをコピー。
続いて【編集するテーマを選択】をクリック。
プルダウンメニューから【AFFINGER Child】をクリック。
【AFFINGER Child】になっている事を確認して【選択】ボタンをクリック。
子テーマに移動したので、テーマファイルの【single.php】をクリック。
マウスポインターをコードを書き込むエリアに移動してクリックすると、カーソルが先頭に移動します。
この状態で【ctrl】+【V】とすれば・・・
コードが貼り付けられるので【ファイルを更新】をクリックして保存します。
『ファイルの編集に成功しました。』と表示されて、最初のphpファイルのコピーは完了です。
同じ作業を【single-type1.php】と【single-type2.php】でも行います。
再度右上の【編集するテーマを選択】をクリック。
プルダウンメニューから【AFFINGER】をクリック。
【AFFINGER】になっている事を確認して【選択】ボタンをクリック。
次にテーマファイルの中から【single-type1.php】をクリック。
【single-type1.php】と【single-type2.php】があるので間違えないように注意
左上に表示されている現在編集しているファイル名が『AFFINGER: single-type1.php』となっている事を確認して、マウスポインターをコードの書かれている編集エリアに移動してクリックします。
マウスポインターがある行でカーソルが点滅表示されます。
カーソルの位置は空白の行でもコードの書かれている行でもどこでも構いません。
カーソルがコード編集エリアで点滅している状態で、先ほどと同じように【ctrl】+【A】でコード全てを選択して【ctrl】+【C】でコードをコピーします。
テーマ選択のプルダウンメニューから【AFFINGER Child】をクリック。
【AFFINGER Child】になっている事を確認して【選択】ボタンをクリック。
テーマファイルの中から【single-type1.php】をクリック。
マウスポインターをコード編集エリアへ移動してクリック。
カーソルが表示されます。
【ctrl】+【V】でコードを貼り付けます。
左下の【ファイルを更新】をクリックして保存します。
これで２つ目のファイルのコピーが完了です。
最後に『single-type2.php』も同じ作業でコピーします。
プルダウンメニューから【AFFINGER】をクリック。
【AFFINGER】になっている事を確認して【選択】ボタンをクリック。
テーマファイルの中から【single-type2.php】をクリック。
マウスポインターをコード編集エリアに移動してクリック。
カーソルが点滅表示されたら【ctrl】+【A】と【ctrl】+【C】でコードをコピー。
テーマ選択のプルダウンメニューから【AFFINGER Child】をクリック。
【AFFINGER Child】になっている事を確認して【選択】ボタンをクリック。
テーマファイルの中から【single-type2.php】をクリック。
コード編集エリアでクリックしてカーソルを表示させます。
【ctrl】+【V】でコードを貼り付けます。
【ファイルを更新】をクリックして保存します。
これで Step 3 のファイルのコピーは完了です。
Step 4：phpファイルのコードを書き換える
アフィンガー子テーマに『single.php』『single-type1.php』『single-type2.php』というファイルが作成されました。
後はコードの一部を書き換えれば作業は終了です。
すでにアフィンガー子テーマに『single.php』『single-type1.php』『single-type2.php』の３つのファイルがあって Step 1 と Step 2 の作業をスキップした方は、念のために『single.php』『single-type1.php』『single-type2.php』をそれぞれメモ帳にコピーしておきましょう。
表示が崩れてしまってもphpファイルをメモ帳にコピーしておいた内容に戻せば元に戻ります。
テーマファイルの中から【single.php】をクリック。
3行目と5行目に『TEMPLATEPATH』と書かれている部分があります。
これを２ヶ所とも『STYLESHEETPATH』と書き換えます。
このように書き換えたら・・・
【ファイルを更新】をクリックして保存します。
続いてテーマファイルの中から【single-type1.php】をクリック。
コードの最後の方にある『<!--関連記事-->』と『<?php get_template_part( 'kanren' ); ?>』という部分を探します。
『<!--関連記事-->』と次の『<?php get_template_part( 'kanren' ); ?>』の2行を『<!--ループ終了-->』のすぐ下の行に移動します。
まずは『<!--関連記事-->』の行の一番左にマウスポインターを持ってきてクリックすると、その行の背景の色が変わります。
その状態で左クリックを押したままマウスを下へ移動して2行の背景の色を変えます。
そこで【ctrl】+【X】でコードを切り取ります。
『<!--ループ終了-->』のすぐ下の行にマウスポインターを移動してクリックします。
するとクリックした行の背景の色が変わります。
その状態で【ctrl】+【V】でコードを挿入します。
このように関連記事を表示させるコードが移動しました。
【ファイルを更新】をクリックして保存します。
２つ目のphpファイルが完成しました。
いよいよ最後のファイルです。
今の『single-type1.php』に行った作業と全く同じ作業を『single-type2.php』でも行います。
テーマファイルの中から【single-type2.php】をクリック。
コードの最後の方にある『<!--関連記事-->』の行の一番左にマウスポインターを持ってきてクリック。
左クリックを押したままマウスを下へ移動して2行を選択。
【ctrl】+【X】でコードを切り取ります。
『<!--ループ終了-->』のすぐ下の行にマウスポインターを移動してクリック。
【ctrl】+【V】でコードを挿入します。
【ファイルを更新】をクリックして保存します。
おつかれさまでした
以上で作業は終了です
ブログを開いて確認してみましょう
まとめ
【single-type1.php】と【single-type2.php】に書かれているコードの『<!--ループ終了-->』までが記事本文を表示させる命令で、その下に関連記事、コメント欄、ページナビを表示させる命令が書かれています。
コードをこの順番にすると・・・
関連記事・ページナビ・コメント投稿欄の順番に表示されます。
また、このようにコードの順番を変えると・・・
ページナビ・関連記事・コメント投稿欄の順番に表示されます。
どの順番に並べるかは、本文の次に何を見てもらいたいかを考えて設定すれば良いと思います。
ちなみにわたしは関連記事・コメント投稿欄・ページナビの順番にしました。
アフィンガーに標準で装備されている機能ではないので、投稿欄の移動にはphpファイルを書き換える作業が必要になります。
わたしと同じようにコメント投稿欄は一番下が良いと考える人もいるでしょう。
次のAFFINGER7ではコメント投稿欄の移動がウィジェットの操作で簡単に出来るようになればいいですね。
この記事が読者様のサイトのカスタマイズに少しでも参考になったのなら幸いです
