web-dev-qa-db-ja.com

私はすべての新しいポストプラグインやカスタム設定にカスタムの "カバー"を追加する必要がありますか？

私は基本的にオンライン本のようなサイトを作成しています、そしてすべての投稿は章です。各章には、Wordpress WYSIWYGでは実際には設計できない、カスタマイズされた、特別に設計された「カバー」ページがあります。それぞれの表紙にはテンプレート化できる側面がいくつかあります（h1、h2、および単一の段落のように - すべての章がそれを持つことになります）。この「カバー」には、この章にのみ関連する特定のCSSもあります。

理想的には、私はWordpressの外でこれらのカバーをデザインして、コード化することができて、どういうわけかどのカバーを使うべきか各ポストに知らせることができるでしょう。それがWordpressが実際にそのコードをインポートするのか、それとも単純にphpインクルードでそれをインクルードするのかは私にとってあまり重要ではありません。私はこれができるだけ合理化されることを望みます。

提案？

pluginscustom-post-typescustomizationinclude
2
Brandon Durham

もう1つの解決策は、ページ属性を呼び出さないことです。

説明：やることリスト

RW_Meta_Boxライブラリ をダウンロードしてください。 私は作家/寄稿者の一人です

プラグイン

ここであなたは2つの小さなプラグインを見ることができます（私はあなたの質問のために特に書きました）。

入力

最初のものはRW Meta Boxライブラリの依存関係です。必要なものを変更し（ユーザーキャップチェック）、それをプラグインフォルダにアップロードするだけです。必要な変更は非常に簡単です。正しい ユーザーロールまたは機能 を検索し、現在'edit_theme_options'を読むことができる場所にそれを追加します。それはあなたのデザイナーではなくあなたの作者の能力と一致するはずです。

これは2つのtextareaメタボックスを追加します。

<?php
! defined( 'ABSPATH' ) AND exit;
/** Plugin Name: (#65707) »kaiser« Add Meta Boxes */

function wpse65707_add_meta_boxes()
{
    // Don't add it for all users, but only for your designers
    if (
        ! current_user_can( 'edit_theme_options' ) # CHANGE ME!!!
        OR ! class_exists( 'RW_Meta_Box' )
    )
        return;

    $prefix = 'wpse65707_';
    $meta_boxes[] = array(
        // Meta box id, UNIQUE per meta box
         'id' => 'cover'
        // Meta box title - Will appear at the drag and drop handle bar
        ,'title' => 'Designers Space'
        // Post types, accept custom post types as well - DEFAULT is array('post'); (optional)
        ,'pages' => array( 'post' )
        // Where the meta box appear: normal (default), advanced, side; optional
        ,'context' => 'normal'
        // Order of meta box: high (default), low; optional
        ,'priority' => 'high'
        // List of meta fields
        ,'fields' => array(
            array(
                 'name' => 'Styles'
                ,'desc' => "Only valid CSS here"
                ,'id'   => "{$prefix}styles"
                ,'type' => 'textarea'
                ,'std'  => "h1 { color: #009ee0; }"
                ,'cols' => "40"
                ,'rows' => "8"
            ),
            array(
                 'name' => 'MarkUp'
                ,'desc' => "Only valid HTML here"
                ,'id'   => "{$prefix}markup"
                ,'type' => 'textarea'
                ,'std'  => "<h1>Hello Me!</h1>"
                ,'cols' => "40"
                ,'rows' => "8"
            )
        )
    );

    # Add additional Meta Boxes here.
    # For example a drop-down with a list of users that
    # have a custom role of "Designer"
    # (Hint) Use the "Members" plugin for that and 
    # WP_User_Query to get the users as values

    foreach ( $meta_boxes as $meta_box )
        new RW_Meta_Box( $meta_box );
}
# Performance: Only load on post edit & new admin UI screens.
add_action( 'load-post-new.php', 'wpse65707_add_meta_boxes' );
add_action( 'load-post.php', 'wpse65707_add_meta_boxes' );

出力

これは今私たちの出力を気にしています。

その1st 私たちのスタイルをwp_head-hookに追加することがタスクです。このようにして、Designerが追加したカスタムスタイルを何でも注入することができます。

その2nd それがすることは、現在の投稿IDをpost_class();テンプレートタグのpost_classフィルタに追加することです。こうすることで、現在の投稿コンテンツのみを簡単にターゲットに設定でき、それ以外には何も設定できません。

その3第二 機能はパーサーです。このパーサーを使用すると、デザイナーは抽象化層を介してテンプレートタグを追加できます。カスタム%Template Tags%。そのため、wpse65707_custom_post_styles_parser内で定義されているものはすべてset templateタグに置き換えられます。関数自体はthe_contentのためのフィルタコールバックです、それであなたはそれがあなたがそれをあなたが使っているどんなテーマでも動くようにするために何かを変える必要は本当にありません。

<?php
! defined( 'ABSPATH' ) AND exit;
/** Plugin Name: (#65707) »kaiser« Custom Post Styles */

// Add custom styles to the `wp_head` hook in the header.php file.
function wpse65707_custom_post_styles()
{
    $styles = get_post_meta( get_the_ID(), 'wpse65707_styles', true );
    $styles = str_replace( 
         '%ID%'
        ,get_the_ID()
        ,$styles
    );

    return print "<style type='text/css>{$styles}</style>";
}
add_action( 'wp_head', 'wpse65707_custom_post_styles' );

// Add the plain ID to the post classes for easier styling
// Prevents overriding everything else outside
function wpse65707_post_class ( $classes )
{
    $classes[] = get_the_ID();
    return $classes;
} 
add_filter ( 'post_class' , 'wpse65707_post_class' );

// Parse the content to add Template tags on the fly
function wpse65707_custom_post_styles_parser( $content )
{
    $markup = get_post_meta( get_the_ID(), 'wpse65707_markup', true );
    return strtr(
         $markup
        ,array(
             '%CONTENT%' => $content
            ,'%AUTHOR%'  => get_the_author()
            // Add other template tags here
         )
    );
}
add_filter( 'the_content', 'wpse65707_custom_post_styles_parser' );

テンプレート：single.php＆header.php

これをテーマで機能させるために重要なのは、これら2つのファイル内の次のテンプレートタグだけです。

  • header.phpにはwp_head()タグが必要です。
  • single.phpはpostコンテナのdiv/article HTMLタグにpost_class();関数を使わなければなりません。
  • single.phpはその内容を表示するためにthe_content();を使わなければなりません。

それは今どのように機能しますか？

それは簡単です：wpse65707_custom_post_styles_parser()の中で許されるすべてのテンプレートタグはあなたのデザイナーが書いたものと交換されます。

// Example content for the "MarkUp"-Meta Box
<h1>Hello Me!</h1>
<h2>A fairy tale by %AUTHOR%</h2>
This is story of love and joy.
%CONTENT%
<p>We hope you liked it.</p>

これで%CONTENT%は実際の投稿内容に、%AUTHOR%は作者の表示名に置き換えられます。自由に拡張してください。

重要なのは、のみのタグです。デザイナーがスタイルの接頭辞として使用する必要があります。%ID%タグ。これは、彼らが現在の記事コンテナー以外のものをターゲットにしていないことを確認します。

それはすべての人です！

2
kaiser

カスタムマークアップ：投稿テンプレート

ページテンプレートを使用してください。

function wpse65707_post_templates()
{
   add_post_type_support( 'post', 'page-attributes' );
}
add_action( 'init', 'wpse65707_post_templates' );

次に、各カスタムレイアウトの新しいテンプレートをアップロードするだけです。

カスタムルック：条件付きスタイル

投稿にCSSを追加するには、新しいスタイルシートを追加するだけで、そのページにのみエンキューされます。

function wpse65707_single_styles()
{
    if ( ! is_single() )
        return;

    wp_enqueue_style(
         'style_'.get_the_ID()
        ,get_stylesheet_directory_uri().'/single-styles/style-'.get_the_ID().'.css'
        ,array()
        ,filemtime( get_stylesheet_directory().'/single-styles/style-'.get_the_ID().'.css' )
    );
}
add_action( 'wp_enqueue_scripts', 'wpse65707_single_styles' );

このように、あなたは単にあなたのテーマに~/single-stylesという名前のフォルダーを追加して、そのページにエンキューするだけのそのフォルダーにstyle-IDHERE.cssという名前のファイルを追加することができます。そのため、文脈依存のスタイルシートに沿ったものです。

楽しむ！

1
kaiser