サポート » テーマ » 自作テーマ作成後のチェックについて

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっております。
    下記の【質問の主旨】について、どなたかご存知の方がいらっしゃいましたら、ご教示を願います。

    【質問の主旨】

    自作のテーマを本番環境で公開する前に、チェックする点は下記の3つ以外に何かあるでしょうか?オフラインで教えていただいたことをもとに、自分は以下のことを実践しています。

    【質問の補足】

    • 現在、自作テーマを作成して、自分が必要とする機能は、ローカル開発環境内で一通り出来上がっている状態で、上記3点目にある出力データの無害化について確認作業を行っています。
    • WordPressデザインブックという本に書かれているコードをベースに自分好みの機能を追加、改変しています。
    • WordPressのテーマ改変は公式テーマでのみ行った経験しかありません。自作テーマついてWordPressのお作法に則っているかよく分かりません。
    • このテーマは個人ブログで使用します。配布する予定はありません。
    • 公式ディレクトリに申請する予定はありません。

    以上、よろしくお願い申し上げます。

    • このトピックはechizenyaが7年前に変更しました。
    • このトピックはechizenyaが7年前に変更しました。
    • このトピックはechizenyaが7年前に変更しました。
15件の返信を表示中 - 1 - 15件目 (全16件中)
  • nobita

    (@nobita)

    こんにちは、

    mythemeをちょっと見ただけなのですが、いくつか気づいた点を書いておきます。

    間違っているかもしれないので(テストはしていません)精査してください。

    
    投稿日:<?php echo get_the_date( 'Y-m-d' ); ?>
    

    get_the_dateは、コアの時刻フォーマットを引き継ぐと思いますので、’y-m-d’を外して、管理パネルから操作するようにしてはどうでしょう。

    
    <meta name="description" content="<?php echo wp_trim_words($post->post_content, 100, '...'); ?>">
    

    wp_trim_wordsは、英語での単語分割なので、日本語だと意図した動作にならない可能性があります。
    日本語なら、wp_html_excerpt()等文字数ベースでカウントするものを検討するといいかも、、、

    
    <meta property="og:description" content="<?php single_term_title(); ?> に関する記事の一覧です。">
    

    全体的に、属性値でのesc_attr()は、意識されていないように感じます。検討してみてはどうでしょう。

    
    <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">投稿日:<?php echo get_the_date( 'Y-m-d' ); ?></time>
    

    datatime属性に使用する時刻は、フォーマットが決まっています。調べてみてください。

    
      if (has_post_thumbnail() ) {
        $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), '$size');
        $url = $postthumb[0];
    

    シングルクウォートで囲ってありますが、動作しますか?

    テーマは、ブラウザでの表示に使われるので、テーマユニットテスト 等で検索して表示上の問題がないか
    十分検査してみてください
    例えば、

    
    img, .wp-caption {
      max-width: 100%;
      height: none;
    }
    

    一般的には、heightの値は、autoが使われることが多いです。

    • この返信は7年前にnobitaが編集しました。
    msio

    (@msio)

    作成したテーマの確認について挙げておられる3項目以外にもあるかというご質問からは逸れてしまいますが
    作成されたプログラムの見直しについて全般的にご紹介したいと思います。

    プログラムの確認作業、いわゆるデバッグなどの作業というものそのものがプログラミングといっても
    過言ではないくらい重要なものだと私は考えています。

    例えて確認項目として変数の定義を確認する必要を挙げます。
    固定長を利用している、文字列と数字の受け取り、クラス間での名前の統一、使用時期に応じて宣言、破棄など
    ひとしきり確認する必要があるため、それらをリストアップすることになるでしょう。
    それぞれの役割と関係性を書き出しますと、それは構造定義書になります。

    サイトマップを取得するなどはプラグインなどで可能かと思われますので、テーマをサイトに設置して
    それぞれのページの動作を確認します。そこでモジュールがすべて稼働しているかどうかという
    その「すべて」の言葉の意味を定義するために動作モジュールを書き出して、動作条件と関係性を書き出します。
    するとER図ができます。

    これらを設計、作成、設置、確認、という流れで枠をつくりそれぞれにチェックをいれていくと工程表になります。
    最初からこれができるようになる、することになるのが業務という単位になりますが、それに至るまでに
    練習と経験でつくりあげていく、一回目の作業はもちろん設計などありませんが、二回目以降にその反省を
    踏まえて予定をたてていくと、自ずと「業務レベル」の作業になっていくものだと思います。

    生産系の業務をされているかたはもちろんそういう工程を経てそれぞれの業務をこなし、各業界では
    その経験値が設計に表れていると思いますが、それを作り上げるのはなにより「チェック作業」という
    工程にあると思います。

    何がベストでこれをやっておくべきだ、というのは私にはわからないのですがその方法を構築することが
    プログラミングスキルそのものだと思うので、ご質問の回答には至らないかと思いますが私としては
    回答のないものであったり回答すべきでない問題かと思いましたのでご紹介させていただきました。

    いまできた今回の作品が今までで一番、毎回それぞれの終端には各々の最高ができていくと思いますので
    その都度、手法が向上していく確認方法を作成されていくのがよいのではないかと思います。

    お目汚し申し訳ございませんが素人の意見としてご容赦いただけると幸いです。

    ishitaka

    (@ishitaka)

    こんにちは

    ざっと思いついたことを箇条書きにしてみました。

    フォーム等の外部入力がある場合は、

    • XSS 対策
    • SQL インジェクション対策
    • CSRF 対策
    • この返信は7年前にishitakaが編集しました。理由: 誤記
    トピック投稿者 echizenya

    (@echizenya)

    @nobita さん、 @msio さん、 @ishitaka さん。
    それぞれご意見やアドバイスありがとうございます!
    ここ数日、個人的にバタバタしておりまして、みなさまから頂いたコメントを見れていませんでした。
    まずは取り急ぎお礼を述べます。

    これからコメントの内容をよく確認した上で改めて個別にお礼を申し上げます。
    いま少しお日にち、お時間をいただければ幸いです。
    以上、よろしくお願い申し上げます

    • この返信は7年前にechizenyaが編集しました。
    トピック投稿者 echizenya

    (@echizenya)

    @nobita さん
    コメントありがとうございます。
    アドバイスに基づいて修正したコードをGitHub上にUPしました。

    修正内容の詳細は下記のとおりです。

    1.

    get_the_dateは、コアの時刻フォーマットを引き継ぐと思いますので、’y-m-d’を外して、管理パネルから操作するようにしてはどうでしょう。

    ご指摘のとおり、管理パネル → 一般設定 → 日付のフォーマットで’Y-m-d’を設定しておくと、

    投稿日:<?php echo get_the_date(); ?>

    としていても、2015-08-06と表示されるようになりました。

    2.

    wp_trim_wordsは、英語での単語分割なので、日本語だと意図した動作にならない可能性があります。日本語なら、wp_html_excerpt()等文字数ベースでカウントするものを検討するといいかも、、、

    wp_html_excerpt()に変更してもcontent=””には、日本語の抜粋文が抽出されましたので、wp_html_excerpt()に変更しました。

    3.

    全体的に、属性値でのesc_attr()は、意識されていないように感じます。検討してみてはどうでしょう。

    property、name、contentの一部の各属性値に対して、echo esc_attr()を適用しました。

    4.

    datatime属性に使用する時刻は、フォーマットが決まっています。調べてみてください。

    datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"

    と使っていた箇所を

    datetime="<?php the_time('c'); ?>"

    としました。

    5.

    シングルクウォートで囲ってありますが、動作しますか?

    テーマユニットテスト 等で検索して表示上の問題がないか十分検査してみてください

    テーマユニットテストで検査して、各ページをざっと確認したところ、下記のような指摘を受けました。
    ただ自分にとってこれらが何を意味しているのか、よく分かりません。

    • タイトルが長い英単語の時、コンテンツエリアをはみ出すべきではない。
    • テンプレート: アイキャッチ画像 (縦)Notice: Trying to get property of non-object in /var/www/wordpress/wp-content/themes/mytheme/single.php on line 51
    • テンプレート: アイキャッチ画像 (横)Notice: Trying to get property of non-object in /var/www/wordpress/wp-content/themes/mytheme/single.php on line 51
    • テンプレート: 抜粋 (自動生成)レイアウトの問題が出ないことを保証するために、ぜひ自動生成の抜粋の整形をテストしてください。また、excerpt_lengthexcerpt_more などすべてのフィルターが適用され、正しく表示されることを確認してください。

    3/25(土)にWordBench大阪でもくもく会が開催されますので、参加してどなたかにお聞きしようと思います。

    トピック投稿者 echizenya

    (@echizenya)

    @msio さん。
    いつもコメントありがとうございます。

    プログラムの確認作業、いわゆるデバッグなどの作業というものそのものがプログラミングといっても過言ではないくらい重要なものだと私は考えています。

    アドバイスありがとうございます。プログラミングの学習をしていると、諸先輩方から変数をデバッグするように言われます。改めてその重要性を再確認いたしました。

    例えて確認項目として変数の定義を確認する必要を挙げます。固定長を利用している、文字列と数字の受け取り、クラス間での名前の統一、使用時期に応じて宣言、破棄などひとしきり確認する必要があるため、それらをリストアップすることになるでしょう。

    自分は、IT企業やWebサイト制作会社などにつとめたことがないせいか、おっしゃっていることについて考えが及びませんでした。

    また固定長やER図など聞いたことがあっても、実際にはよく分かっていない用語についても再確認する良い機会になりました。

    【参考ページ】
    http://wa3.i-3-i.info/word12067.html
    http://it-koala.com/entity-relationship-diagram-1897

    トピック投稿者 echizenya

    (@echizenya)

    @ishitaka さん
    それぞれアドバイスありがとうございます。下記の項目についてチェックを行いました。

    1.
    テーマユニットテストによるチェック
    @nobita さんに先のコメントで述べたとおり、パスできない箇所については、WordBench大阪でどなたかに質問をしようと思います。

    2.
    W3C Markup Validation Serviceによるチェック
    → ErrorとWarningを合計で45ヶ所の指摘をされましたので、それぞれ確認の上、修正するようにします。

    3.
    JavaScript エラーチェック(ブラウザのデベロッパーモード等)
    → Chromeデベロッパーツールで確認したところ、幸いにしてエラーは発生しませんでした。

    4.
    脆弱性対策について
    → 今回の個人ブログに関して、外部から文字入力できるのは、ウィジェットにある「検索ボックス」だけなので、特にXSS、SQLインジェクション、CSRFの各対策は、行わないことにしました。

    トピック投稿者 echizenya

    (@echizenya)

    @nobita さん。 @ishitaka さん。 @ishitaka さん。

    みなさまからのアドバイスのおかげで、下記の状態までテーマ作成を進めることができました!

    https://github.com/echizenyayota/e-yota/tree/private_lesson_20170307_9_wpforum

    確認した上でのお礼が遅くなり誠におそれいります。今後ともどうぞよろしくお願いします。

    エスケープ漏れやコーディング規約のチェックに PHP_CodeSniffer 走らせると割と便利です。
    参考: https://firegoby.jp/archives/5532

    https://github.com/Automattic/_s/blob/master/.travis.yml

    composer を導入済みであれば、

    
    $ composer global require squizlabs/php_codesniffer
    $ composer global require wp-coding-standards/wpcs
    $ phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs
    

    で導入し、

    
    $ cd path/to/your/theme
    $ phpcs --standard=WordPress -p -s -v -n  --extensions=php
    

    でチェックを走らせることが出来ます。

    nobita

    (@nobita)

    こんにちは、

    もくもく会が開催されますので、参加してどなたかにお聞きしようと思います

    詳しくは直接聞いていただいたほうがいいと思いますが、

    タイトルが長い英単語の時、コンテンツエリアをはみ出すべきではない。

    それほど大きな問題ではありませんが、例えば長いURLなどをタイトルに貼り付けてみると、スペースがないため、タイトルがオーバーフローしてしまうといった事を何とかしなさいという事だと思います。

    配布テーマの場合だと、特に英語圏の人などで、3-4行にわたるタイトルを書いて、レイアウトが崩れてクレームを受けたという経験があります。

    稀なケースなので、個人使用の範囲ではそれほど気にすることはないと思います。

    http://www.tenman.info/wp3/manualraindrops/archives/1798#rd-class-wrap-controll

    https://ja.wordpress.org/support/topic/%E9%80%A3%E7%B6%9A%E3%81%97%E3%81%9F%E5%85%A8%E8%A7%92%E8%A8%98%E5%8F%B7%E3%81%8C%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E6%8A%BC%E3%81%97%E5%87%BA%E3%81%99/

    CSSで解決できる問題なので、必要な場合は検討してみてください。

    
       <?php echo get_post( get_post_thumbnail_id() )->post_excerpt; ?>
    

    コードを見ただけなので、よく確認してほしいのですが、post_excerptってobjectがないよという意味だと思います。

    $post->ID なんかもよく使うんじゃないかと思いますが、時々ないよ!ってことがあります。
    それが、あるかどうかチェックして、あればechoといった形に変更してはどうでしょうか?

    テンプレート: 抜粋 (自動生成)レイアウトの問題が出ないことを保証するために、ぜひ自動生成の抜粋の整形をテストしてください。また、excerpt_length や excerpt_more などすべてのフィルターが適用され、正しく表示されることを確認してください

    こういうやつあったんですね、単に抜粋が正常に動作するかどうかをチェックする事を促進しているだけで、エラーがあるという事ではないんではないでしょうか?

    nobita

    (@nobita)

    追記:
    連続文字の折り返しは、投稿本文では結構重要なので、サンプルを置いておきます。

    すごくベテランのテーマ制作者のテーマの場合でも、

    テーブルオーバーフローのサンプル

    でも、個人的にはこうなるべきだろうとかっていうのがあるので、本文については、よく検討してみてください
    テーブルオーバーフローサンプル

    最終的には、その書き方がありえないと考えるか、そういう場合でも何とかしようと考えるかだけの違いで、もちろんバグではないのですが、、、

    • この返信は7年前にnobitaが編集しました。
    トピック投稿者 echizenya

    (@echizenya)

    @toro_unit さん。

    PHP_CodeSnifferのご紹介ありがとうございます!
    ただそのツールの使用以前にbrewコマンドでcomposerをインストールができず作業が止まっています。

    さくらのVPS(CentOS6系)において、今回の質問に関するWordPressサイトとほとんど同じのサイトを
    すでにインストールしています(普段は電源を停止)ので、そこでPHP_CodeSnifferを利用しようと考えています。

    まずキータの記事を参考にしながら、brewコマンドのインストールができたと思います。

    brew -v
    Homebrew 0.9.8 (no git repository)
    Homebrew/homebrew-core N/A
    トピック投稿者 echizenya

    (@echizenya)

    @toro_unit さん。

    (承前)次に、

    $ brew install composer

    を実行しましたが、下記のようなエラーが出ます。

    $ brew install composer
    error: unknown option config'
    usage: git clone [options] [--] <repo> [<dir>]
    
        -v, --verbose         be more verbose
        -q, --quiet           be more quiet
        --progress            force progress reporting
        -n, --no-checkout     don't create a checkout
        --bare                create a bare repository
        --mirror              create a mirror repository (implies bare)
        -l, --local           to clone from a local repository
        --no-hardlinks        don't use local hardlinks, always copy
        -s, --shared          setup as shared repository
        --recursive           initialize submodules in the clone
        --template <path>     path the template repository
        --reference <repo>    reference repository
        -o, --origin <branch>
                              use <branch> instead of 'origin' to track upstream
        -b, --branch <branch>
                              checkout <branch> instead of the remote's HEAD
        -u, --upload-pack <path>
                              path to git-upload-pack on the remote
        --depth <depth>       create a shallow clone of that depth
    
    Error: Failure while executing: git clone https://github.com/Linuxbrew/homebrew-core /home/echizenya/.linuxbrew/Library/Taps/homebrew/homebrew-core --config core.autocrlf=false --depth=1 -q
    Error: Failure while executing: /home/echizenya/.linuxbrew/bin/brew tap homebrew/core -q

    残念ながら、このエラーを見て、どのように対処すれば良いのか今の自分には分かりません。

    ところで、このフォーラムはWordPressに関する問題について、質問・議論をする場所で、
    composerやbrewコマンドそのものについて、お話し合いをする場所ではないと思います。

    なので、WordBench大阪のもくもく会でどなたかにお聞きするか、また別の機会でWordPressに
    詳しいエンジニアの方に、brewコマンドとcomposerのインストールについてお聞きしたいと思います。

    わたしの力量不足でアドバイスを生かすことができず、まことに恐縮です。
    アドバイスありがとうございました。

    トピック投稿者 echizenya

    (@echizenya)

    【追記】
    @toro_unit さん。
    本来ひとつのコメントで返信すべきですが、まとめてコメントしようとすると、投稿を受け付けてもらえなかったので、2分割させていただきました。お手数をおかけして恐れ入ります。今後ともどうぞよろしくお願いします。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「自作テーマ作成後のチェックについて」には新たに返信することはできません。