「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

コメント欄のカスタマイズで立ち往生して...
 
共有:
通知
すべてクリア

[解決済] コメント欄のカスタマイズで立ち往生しています。

20 投稿
4 ユーザー
16 Likes
842 表示
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

先日、固定ページにコメント欄を表示させる方法として、

「固定ページの本文内で " square_coment "というショートコードを書く」というアドバイスをいただき、無事解決に至りましたkukukuです。

皆さまにお世話になりありがとうございました。

その後、コメントフォームのカスタマイズを試みているのですが、添付画像のように投稿されたコメント一覧の最後尾に新しいコメント欄<コメントをどうぞ>があるのですが、これを最上部に移動させることは可能でしょうか?

ご指導よろしくお願いいたします!

URL(高速化無効)https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

子テーマCSSに以下を追加。
図示のように赤枠と青枠の表示順を逆にします。

.comment-area {
  display: flex;
  flex-direction: column-reverse;
}

 


   
わいひら and kukuku reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@chu-ya さま、

連日お世話になり恐縮です。

また、早々の回答ありがとうごさいます!

CSSの記述でスッキリ解決致しました。

ありがとうございました。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@kukuku さん

CSS ではアクセシビリティ(サイトを支障なく使えるかどうか)に問題が発生するため、私であればテンプレートを作成します。

CSS でのアクセシビリティの問題は、以下のページに書かれています。

flex-direction - アクセシビリティの考慮 - CSS: カスケーディングスタイルシート | MDN

視覚障害者と書かれていますが、視覚障害者に限らずキーボードで操作する方にも不利な影響を及ぼします。実際に現在の状態のままページを表示した後、tab キーを押してページ内の移動をお試しください。コメントフォームを飛ばして大きく下に移動し、コメント一覧のコメントにフォーカスが当たります。また、コメント一覧の後では、今度は上に大きく移動しコメントフォームにフォーカスが当たります。これは支障があると思います。

この問題を避けるために、まずは子テーマに 1 つファイルを作り、ファイル名を square-comment.php とします。

※ FTP ソフトやサーバーのファイルマネージャーをお使いになり、子テーマの style.css や functions.php と同じ階層にファイルを作ります。ロリポップのファイルマネージャーは、おそらく ロリポップ!FTP だと思います。

そして、square-comment.php に下記リンク先のコードを追加します。

https://notepad.pw/share/tks1dash1

※ 中身は親テーマの comments.php とほぼ同じです。

最後に、以前に子テーマの functions.php に追加したコードを削除し、新たに以下のコードを追加します。

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});
This post was modified 2年前 by Akira

   
わいひら and chu-ya reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

Akiraさま、

アクセシビリティの問題、ご指摘ありがとうございます。

私にはハードル高すぎて、とりあえずご指示のようにファイルの作成、コードの書き換えを実行致しました。

が、添付のような結果になってしまいました!

きっと何か基本的な所をミスっているのだと思い何度も検証していますがわかりません。

またまたお手数おかけして申し訳ありませんが、再度お力添え下さい!

現状URL:  https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@kukuku さん

●手順補足

  • リンク https://notepad.pw/share/tks1dash1 のコードをコピペし、「square-comment.php」と言う名前でファイル作成。
  • サーバの子テーマのディレクトリ/wp-content/themes/cocoon-child-master/下に、作成した「square-comment.php」をアップロード。
  • 以前、function.phpに書いたコードを置き換える
add_shortcode( 'square_comment', function() {
  comments_template();
});

↓前のコードを以下に置き換え

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});
  • コメントを表示したいページに、前回と同じ以下のショートコードを記述する。
[square_comment]

 

 


   
わいひら reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@chu-ya さま、

ご連絡遅くなりました。

お手間を取らせています。
手順を要約して頂きありがとうございます。

最初はDreamweaverからサーバーにアクセスし、square-comment.php」のアップロードと
function.phpの書き換えを実行し、
先ほど、ロリポップのFTPで同じ処理を致しました。

が、全く結果は同じ全面文字化けです。

きっと何か基本的な所をミスっているのだと思いますが  
私の知識では全くお手上げです。

固定ページに掲示板機能を…というところから見直した方が良いのでしょうか。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@kukuku さん

ファイルの文字コードが原因かもしれません。

このような手順で行うとどうなるでしょうか。

① 現在ある square-comment.php ファイルを削除します。

② ロリポップ!FTP でファイルを作成します。

参考:ロリポップ!FTP(ファイルの作成、編集、ダウンロード)

「ファイル名」に square-comment.php と入力します。

「文字コード」は何を選べるのか分かりませんが、utf-8 が選べるのなら選びます。

「ファイルの属性(パーミッション)」は、とりあえずデフォルトの 644 でいいと思います。

「編集画面」に https://notepad.pw/share/tks1dash1  のコードをコピペします。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@akira さん

根本原因が何か?元ファイルを何で作ったか気になる点ですが。

ワードプレス上で
[ダッシュボード]→[外観]→[テーマファイルエディタ]→square-comment.php

既にあるファイルにソースコード(テキスト)をコピペして上書き保存。
でもいいのは?


   
わいひら reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@akira さま、

chu-ya さま、

 

見捨てずお付き合い頂きありがとうございます!

ダッシュボードーテーマファイルエディタでの記述も

ロリポップでのファイル作成(utf-8)も同じように文字化けしました。(ファイル添付)

他に策がありましたらよろしくお願いいたします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

kukukuさん

文字化けは治りましたね。

問題は、PHPソースと認識されないために、実行されずに、ソースの中身が表示されてしまっていることだと思います。

拝見すると、?マークが全角になってしまっています。
(1箇所ではなく、多数。)

少なくとも、「<?php」(すべて半角)で始まらないと、認識されないと思います。

作成したPHPファイル上でも、全角なのでしょうか。

ご確認いただけますでしょうか。
(他にも文字が変換されていないか、確認が必要かもしれないです。)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

kukukuさん

あと、表示されているので変なのは変数名だと思います。

$マークの後ろに、スペースがあります。

例えば、本来「$user」のものが、「$ user」と$マークの後ろにスペースが入っています。

これも1箇所ではなく、多数なっています。

これらも、作成したPHPファイル(square-comment.php)上では、間にスペースが入っているのでしょうか。

それとも、PHP上は問題なくて、表示されているだけでしょうか。

 

もし変換されているようであれば・・・。

?マークや$マークの件が、変換されずに、そのままを貼り付けることができれば、今の方法で上手くいきそうに思います。

 


   
わいひら reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご連絡ありがとうございます。

全角?を全て半角?に変換しUPしたところ
「重大なエラー発生しました」と表示されこのページにだけアクセスできなくなりました!

WPからのメールでは下記のようになっています。

エラー詳細

===============

エラータイプ E_PARSE /home/users/0/daa.jp-nmos-shayukai/web/new/wp-content/themes/cocoon-child-master/square-comment.php ファイルの 18 行目で発生しました。 エラーメッセージ: syntax error, unexpected 'req' (T_STRING), expecting variable (T_VARIABLE) or '{' or '$'

指摘されている18行目あたりのコピー添付いたします。

いずれにせよ、一度 square-comment.phpを削除して出直さなければならないですね。


   
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご指摘のように$の後にも半角スペースが入っていたりします。

明日は朝から終日出かけますので、php の全角、スペースなどを整理してから
ご報告させて頂きますのでよろしくお願いいたします。

明日の朝早いので今日はこれにて失礼いたします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

kukukuさん

とりあえずエラーメッセージは、PHPと認識されたために出力されているように思います。
(変数に$がないため、文法的にエラーとなった)

先程エラーメッセージを記載いただいた返信に、貼っていただいた画像を拝見すると、他にも問題ありそうです。

  • 半角の括弧「()」が、全角の括弧「()」に、なっているように見えます
     
  • 半角のカンマ「,」が、全角の読点「、」になっているように見えます
     
  • 半角のピリオド「.」は、全角の句点「。」になっているように見えます

 

これまでの経緯を拝見する限り、貼り付け方に問題がありそうです。

例えば、WordやExcelなどに一旦貼り付けて、オートコレクト機能が働いて自動変換。
それを貼り付けた。

そんな風に見えてしまいます。

 

ここまで、変換されている文字が多いと、他にも変換された文字がないか確認するのは大変だと思います。

やり直した方が確実かと思います。

 

直接貼り付けても、こういう状態になってしまうのでしょうか。

そうであれば、文字コード「UTF-8(BOMなし)」を扱えるテキストエディタをご利用になった方が良いのかもしれないです。

 

そうでなく、何かを経由してこうなったのであれば、直接貼り付けた方が良いと思います。

 

今後のことを考えれば、テキストエディタをご利用になれる状態にしておくのが、良さそうには思います。


   
kukuku and わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@kukuku さん

php の全角、スペースなどを整理してから

整理するのではなく、ファイルを削除し作り直すのがいいです。

そのようなことになる理由が分かりませんが、コードは以下のリンクから直接ファイルに貼り付けてください。

https://notepad.pw/share/tks1dash1

mk2さんもおっしゃっていますが、別の何かに貼り付けた後で、その別の何かからファイルに貼り付けるのはお止めください。

もし、コードの変更など別の何かに貼り付ける必要がある場合は、Visual Studio Code などのコードエディターをお使いください。Visual Studio Code は オンライン版 もありますので、すぐに使えます。


   
kukuku and わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

問題の本質、直接的原因(動作の問題)より、仮に「なぜ全角が混入」したのか?動機的原因が問題。
これを明確にしないと、同様の繰り返しかと...


   
kukuku and わいひら reacted
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@akira さま、
mk2 さま、
chu-ya さま、

大変返信が遅くなり申し訳ありません!
そしてまた、私のケアレスミスが発覚しましたこと、ご報告いたします。

コードの貼付けは案内いただいているnotepadから直接コピペしていたのですが、
リンク先のコードが表示されると同時にgoogle翻訳が作動して英語⇒日本語に変換されているのに気付いていませんでした!
コードが半角でなければならない…ということは知ってはいましたが、全角になっていたという事実に気づいておりませんでした。

本当にお騒がせいたしました!!!

というわけで、無事イメージ通り表示され(タブ移動も問題無しです)、皆さまの数々のご支援に感謝申し上げます。

https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

またこのフォーラムの中をウロウロお邪魔することと思いますので、今後ともよろしくお願い申し上げます。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

kukukuさん

上手くいって良かったです。

投稿者:: @kukuku

google翻訳が作動して英語⇒日本語に変換されている

これは盲点でした。
(ブラウザの翻訳機能ってことですよね)

そんなケースもあるんですね。
記憶しておこうと思います。


   
(@kukuku)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご指摘、本当にありがとうございました。

私もこの事実に気が付いたときはぎょッといたしました。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました