web-dev-qa-db-ja.com

Wordpressの投稿変更テンプレート、ドロップダウンではなく、画像選択

WordPressコーデックスを閲覧しましたが、こんな感じです→

function is_page_template( $template = '' ) {
    $page_template = get_page_template_slug( get_queried_object_id() );


if ( empty( $template ) )
    return (bool) $page_template;

if ( $template == $page_template )
    return true;

if ( is_array( $template ) ) {
    if ( ( in_array( 'default', $template, true ) && ! $page_template )
        || in_array( $page_template, $template, true )
    ) {
        return true;
    }
}

return ( 'default' === $template && ! $page_template );
}

上記のものをfunctions.phpに貼り付けると、投稿テンプレートのオプションが表示されます。

しかし、私たちがこのような画像で投稿タイプのテンプレート選択をしたいのであれば→ enter image description here これは、ジェネシスポストページバックエンドからの画像です。

WordPressはそのような取り決めを提供しますか?私は初心者なので理解できませんでした。どうすればこれを達成できますか。

論理は私には明らかですが→

ステップ1:このような選択オプションを持つメタをバックエンドに作成します→ enter image description hereenter image description hereenter image description here

** Step 2 **→クラスを印刷するには、このメタで選択したオプションをどうにかして接続する必要があります。たとえば、画像が正しい順番に並んでいて、次に2番目に選択されている場合(2番目の画像)、クラスである「sidebar-wrap2」をエコーし​​ます。

現在、これはHTMLです→

<aside class="main-sidebar col">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>





<aside class="main-sidebar col <?php If certain condition true {echo "sidebar-wrap2"} ?> ">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>

私はこの特定の条件がどうなるか、そしてそれを書く方法を知りませんが。

私はコーディングの初心者なので、質問を正しく提示できない場合はご容赦ください。ありがとうございます。

2
The WP Novice

これはあなたが達成しようとしている詳細な機能ですが、私はあなたがこの機能を追加することに取り組むあなたの方法であなたを助けるであろういくつかの情報を以下にリストしました。

  1. 投稿タイプのオプションでカスタムmeta_boxを作成する メタボックスを作成する は、他のサンプルでももっとグーグルできるようになる良い出発点です。
  2. 画像ラジオボタンを作成する ラジオボタン画像
  3. あなたはあなたの投稿表示領域でこのオプションを引っ張り、あなたが望む正しいレイアウトを表示するためにどのオプションが保存されたかチェックする必要があるでしょう

下記のように、single.phpの場合は投稿を返す場所に何らかのコードを含める必要がありますが、今後の更新のためにテーマの作成者でない場合は、このページを子テーマとして追加します。

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_id = get_post_meta(get_the_ID(),$field_name,true);

// Check our option and change the display to what option is set

if($post_id == 'sidebar1'){
  dynamic_sidebar( 'sidebar1' );
}
if($post_id == 'sidebar2'){
  dynamic_sidebar( 'sidebar2' );
}
else{
 // Added for when an option is not set
}

enter image description here

アップデート2:

これは、メタボックスを作成し、画像ラジオボタンセットを追加してデータを保存するプラグインコードです。完全に機能するものがある場合は、選択したオプションに境界線も赤に設定されます。ライブサイトでこれを使用するには、以下のいくつかの方法もあります。

  1. コードをphpファイルに保存して、サイトにアップロードできるようにフォルダに追加します。
  2. プラグインの詳細とcustom_meta_box_markupなどのデフォルトコードを編集します。
  3. CSSを別のファイルにエンキューし、画像フォルダを使用してから自分の画像にリンクする

コード:

<?php
    /**
    * Plugin Name: Post options panel
    * Plugin URI: url to plugin
    * Description: Adds posts options layout
    * Version: 1.0
    * Author: My name
    * Author URI: My url
    * License: A "Slug" license name e.g. GPL12
    */

    // Dont call me direct!
    if ( ! defined( 'ABSPATH' ) ) exit;




    // Create content
    function custom_meta_box_markup($object)
    {
        wp_nonce_field(basename(__FILE__), "meta-box-nonce");

        ?>

    <style>
    label > input{ /* HIDE RADIO */
      visibility: hidden; /* Makes input not-clickable */
      position: absolute; /* Remove input from document flow */
    }
    label > input + img{ /* IMAGE STYLES */
      cursor:pointer;
      border:2px solid transparent;
    }
    label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
      border:2px solid #f00;
    }
    </style>



            <div>

                <h4>Radio options</h4>
                <?php
                    // U need to use this to set the checked="checked"
                    $checkbox_value = get_post_meta($object->ID, "meta-box-radio", true);
                ?>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar1"<?php if($checkbox_value == 'sidebar1'){echo 'checked =\"checked\"';} ?> /><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar2" <?php if($checkbox_value == 'sidebar2'){echo 'checked =\"checked\"';} ?>/><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar3" <?php if($checkbox_value == 'sidebar3'){echo 'checked =\"checked\"';} ?>/><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>

            </div>
    <?
    }


    // Saving data
    function save_custom_meta_box($post_id, $post, $update)
    {
        if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], basename(__FILE__)))
            return $post_id;

        if(!current_user_can("edit_post", $post_id))
            return $post_id;

        if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
            return $post_id;

        $slug = "post";
        if($slug != $post->post_type)
            return $post_id;



        if(isset($_POST["meta-box-radio"]))
        {
            $meta_box_value = $_POST["meta-box-radio"];
        }
        update_post_meta($post_id, "meta-box-radio", $meta_box_value);

    }

    add_action("save_post", "save_custom_meta_box", 10, 3);


    function add_custom_meta_box()
    {
        add_meta_box("demo-meta-box", "Custom Meta Box", "custom_meta_box_markup", "post", "normal", "high", null);
    }

    add_action("add_meta_boxes", "add_custom_meta_box");

オプションを保存するために使用できるコードは次のとおりです。

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_option = get_post_meta(get_the_ID(),"meta-box-radio",true);

// Check our option and change the display to what option is set

    if($post_option == 'sidebar1'){
      dynamic_sidebar( 'sidebar1' );
    }
    if($post_option == 'sidebar2'){
      dynamic_sidebar( 'sidebar2' );
    }
    else{
     // Added for when an option is not set
    }
1
Sam