web-dev-qa-db-ja.com

設定を統合してモバイルナビゲーションヘッダーを作成する

私は熟練したプログラマーですが、まったく経験の浅いWordPress開発者です。モバイルデバイスにのみ表示されるヘッダーを作成する方法、およびダッシュボードの設定領域からそのヘッダーのプロパティを変更する方法を見つけようとしています。

私はモバイルのテストにwp_is_mobile();関数を使うべきだと思っています。私はWordPressでこれをどのように実装するかについて少しだけ環境に優しいです。私の主な質問は以下の通りです:

  1. Wp_headまたはactivate_wp_headアクションフックにフックする必要があると思いますが、これは正しいですか?
  2. ダッシュボード設定エリアで背景色とフォント色を設定したい。どうやってこれをやるの?
  3. これはプラグインですか?それは機能ですか?この質問は私が使うべき用語についてです。
  4. 最後の質問ですが、このコードはどこに置きますか?私はそれが私が最後にそれを尋ねた理由であるので、それは前のいくつかの答えに依存すると確信しています!

    最後のポイントですが、get_header()関数呼び出しを直接修正することでこれを行うことができることを私は知っていますが、少し読んだことから私はこれをやりたくないと思います。間違っていれば訂正してください。


助けてくれてありがとう。 私は見ていませんこれは私のために書かれるべきです。私は今WordPressの海で迷子になったばかりで、コンパスを探しています!


それで、これをプラグインとして必要としていることを知ったので、私の質問に対する簡単な改訂として、テンプレートの頭を変更することができるプラグインをどうやって書くかなしでワードプレスの新しいバージョンや新しいテーマや子供のテーマ?

1
Vap0r

私はあなたの質問に順番に答えるのではなく、論理的な道をたどることができるようにします。

私はwp_is_mobile()を使うべきだと思います。

wp_is_mobile()は良い方法です。私の経験では、それはモバイルデバイスの大部分を認識します、そしてあなたがipoteticを気にしないでそして非常に低いパーセントのデバイスが認識されないならば、あなたはそれを取り、続けることができます。

最後に説明しますが、get_header()関数呼び出しを直接変更することでこれを実行できることはわかっていますが、少し読んだだけでは、これを実行したいとは思いません。間違っていれば訂正してください。

あなたは完全に正しいです。 get_header()を修正すると、次回WordPressがアップデートを受け取ると、編集内容は失われます。そして私はあなたがそれを望んでいないに違いない。

'wp_head'または'activate_wp_head'アクションフックにフックする必要があると思いますが、これは正しいですか?

そうではありません。後者はサイトのアクティベーションページで起動するため、まったく関係ありません。最初のものは通常のフロントエンドページで起動しますが、タグ<head>の中(通常は閉じられる直前)に出力しますが、何かを出力したいので<body>の内部に入りますので、そのフックは役に立ちません。

不幸なことに、テンプレートの本体に物事を実装する標準的な方法はありません、それは完全にテーマの領域です。

しかし、WordPressテーマの大多数はget_header()を使用しており、OPからあなたのテーマは例外を作らないようです。

その機能に作用する可能性は複数ありますが、最初で最も簡単な方法はテンプレートファイルを直接編集すること、そしてget_header()がある場所でそれを変更することです:

    if ( wp_is_mobile() ) {
       get_header( 'mobile' );
    } else {
       get_header();
    }

docs でわかるように、get_header()は必要なファイルを変更するオプションの引数を受け入れます。実際、引数なしで呼び出されたget_header()はテーマルートでheader.phpという名前のファイルを必要としますが、文字列を渡す場合はheader-{$name}.phpという名前のファイルが必要です。

文字列を渡すことでカスタムファイルをロードすることができ、そこにあなたが出力したいものすべてを置くことができます(おそらくheader.phpからほとんどコピーすること)。そして、あなたは終わりました。

この方法では、テンプレートファイルを直接操作する必要があります。あなたがテーマの開発者であれば、あなたはこのアプローチを考えることができますが、あなたのテーマが somewhere (ダウンロード、購入..)から来ているならば、私はそれをしないことを勧めますなぜなら、テーマは開発者によって更新される可能性があり、そしてあなたがオリジナルのファイルを編集したならば、それは大きな問題です。

更新の問題とは別に、このアプローチではget_header()を呼び出すすべてのテンプレートを修正する必要があります。 index.phpsingle.php...、およびテーマが提供する他のすべてのテンプレート。

熟練したプログラマーとして、あなたは物事を繰り返すことは良いことではないことを確かに知っています。

確かに良いのは 子テーマ のアプローチです。

上記のいくつかの行は、私はget_header()がテーマルートフォルダからheader.phpを必要とすると言いました。

それは完全に真実ではありません。

現在のテーマが子テーマである場合、最初にその関数は子テーマフォルダでheader.phpファイルを探します。見つからない場合は親テーマのファイルを読み込みます(見つからない場合はcoreに付属のファイルを読み込みます)。

つまり、子テーマを作成する場合は、カスタムのheader.phpを作成できます。if ( wp_is_mobile() )条件のおかげで、モバイルデバイスに対してさまざまなことを実行できます。このように、get_header()を呼び出すテンプレートは元のファイルではなく自分のファイルを必要とします。 1。

また、親テーマが更新されても問題なく更新されます。 Codexのリンク先ページには、子テーマを作成できるようにするのに十分な情報が含まれている必要があります。実際、非常に簡単です。

これは完璧な解決策のようですが、可能性があります:あなたはすでに子テーマを使用しています、そしてそれはサードパーティによって開発されているのであなたはそれを修正できません。任意のアップデートの。

不幸にしてWordPressではあなたは子テーマの子テーマを作成することができないので、あなたの唯一の選択肢はプラグインを構築することです。

プラグインを構築するのが難しいからではない、それは簡単ではないでしょう、実際にはかなり簡単です、get_header()はフィルタリングできないということです、そしてあなたの唯一のチャンスはプラグインフォルダにすべてのテンプレートを置く一種の「偽の」テーマを作成することですWordPressがテーマからではなくあなたのプラグインからテンプレートをロードするようにするには 'template_include' フィルタフックを使用してください。

私はクライアントの仕事のためにそのようなことをすることを余儀なくされ、そしてイライラしていました。


編集2014/10/09

スコープ用のプラグインを構築することについての何か。

通常、プラグインは現在のテーマから独立している必要があります。なぜなら、ユーザーがテーマを切り替えても、プラグインはまだアクティブであり、作業を継続するためです。しかし、あなたの場合のように、プラグインがテンプレートファイルを含まなければならないなら、テーマから独立していると考えて、それはかなり幻想的です。

やり方は、あなたのテーマが持っているすべてのテンプレートファイルを見ることです(言われているように、このプラグインはテーマに関連しています)が、あなたは all filesを見る必要はありません。ただし、第1レベル templatesのみ。

第一レベルのテンプレートはWordPressによって直接ロードされるものです。

テンプレート階層 スキームを見てください。そこには最初のレベルのテンプレートがあります。

テーマがそれらをすべて持っていることはめったにないので、あなたのテーマがどのテンプレートを使っているかに注意してください。

'template_include'という上記の数行のフィルタのおかげで、WordPressに通常ロードされるものではなく別のファイルを強制的にロードさせることができます。

大まかな例です。あなたが特異な投稿のためにURLを訪れたとしましょう。 WordPressは通常、コンテンツを表示するためにテーマのファイルsingle.phpを読み込みます。

あなたのプラグインが含まれている場合:

add_action( 'template_include', function( $template ) {

  if ( is_single() ) {
     $template = plugin_dir_path( __FILE__ ) . 'single.php';
  }
  return $template;

} );

'template_include'(上記の無名関数)をフックする関数は、引数としてWordPressがロードしようとしているテンプレートファイルを受け取り、それが返すものはすべてWordPressによってロードされます。

上記のスニペットで、現在のクエリが単一の投稿に対するものであるかどうかを確認し、その場合はプラグインフォルダから'single.php'ファイルをロードします。

すべての種類のクエリ(is_page()is_archive()is_search()など)に対して繰り返す必要がある場合は、それは非常に困難ですが、プラグインフォルダにallのバージョンがある場合テーマが使用するレベルテンプレートは、次のようにできます。

add_action( 'template_include', function( $template ) {

  $template = plugin_dir_path( __FILE__ ) . basename( $template );
  return $template;

} );

これらの数行のコードはテーマファイルを完全にオーバーライドし、WordPressに常に同じ名前で、テーマ1ではなく自分のプラグインフォルダに名前が付けられたテンプレートをロードさせます。

さて、あなたのプラグインフォルダの中のそれらのファイルは何を含むべきですか?できる限り少なく書くようにするべきですが、それは本当にあなたのテーマによります。

あなたのテーマからのsingle.phpが次のものだけを含んでいると仮定しよう:

get_header();
get_template_part( 'navigation' );
get_template_part( 'content', get_post_type() );
get_sidebar();
get_footer();

これはあなたにとって非常に良いことです、なぜならあなたはそれをあなたのプラグインフォルダーにコピーして、そしてそれをそのように修正することができるからです:

if ( wp_is_mobile() ) {
   require_once . plugin_dir_path( __FILE__ ) . 'mobile-header.php';
} else {
  get_header();
}
get_template_part( 'navigation' );
get_template_part( 'content', get_post_type() );
get_sidebar();
get_footer();

get_header()get_template_part()get_sidebar() )および get_footer() テーマフォルダからテンプレートをロードすると、モバイルデバイスのヘッダーのみが上書きされます。

ただし、テーマテンプレートファイルに多くのHTMLマークアップが含まれている場合は、そのマークアップをコピーしてプラグインテンプレートに貼り付けることしかできません。

悪いところは次のとおりです。

  • テーマを切り替えるときは、プラグインを完全に書き直す必要があります。または、インストールする新しいテーマが子テーマではない場合は、プラグインを削除して child theme way を選択します。

  • テーマが更新されても、あなたのプラグインはどのような方法でも触られることはありませんが、おそらくその更新がテーマテンプレートのマークアップを変更したなら(おそらく、functions.phpのバグのためのテーマの更新です)プラグインテンプレートのマークアップも更新します。

はい、それは厄介です、そして今、あなたは私が上述した私の欲求不満の理由を知っています。


最後の質問ですが、このコードはどこに置きますか?私はそれが私が最後にそれを尋ねた理由であるので、それは前の答えのカップルに依存すると確信しています!

上記のように、現在のテーマが子テーマではない場合、または自分で開発した子テーマである場合は、header.phpを単純に追加または編集するだけで多くの作業ができます。

オプションを視覚化して保存する部分に関しては、子テーマの方法で行くことができればそれは子テーマfunctions.phpから必要とされる1つ以上のファイルで行うことができます。

ダッシュボード設定エリアで背景色とフォント色を設定したい。どうやってこれをやるの?

私は WordPress設定API しか提案できません。コーデックスのリンク先のページでそれをコーディングし始めることができるように十分な情報を見つけたはずです、また 「外部参照」 段落のリンクを見てください例と説明があります。

設定ページを機能させた後は、1回の get_option() 呼び出しでヘッダーのすべての設定を取得して使用することができます。カスタムヘッダーを作成します。

1
gmazzap