custom post types - Simple way to hideshow an announcement (just a div) on homepage?

admin管理员组

文章数量:1415111

In wordpress, in a particular page that is used as the homepage i have a section of HTML used for an announcement. I am wanting to enable someone to easily customize this section from the dashboard, as well as turn it on/off.

The Requirements:

• Only this 1 announcement will ever exist (no need to show multiple)
• Inside the H3 section the user can edit the text
• Allow the user to change the "Learn More" button text
• Allow the user to specify the button URL

Initial Approach:

• Plugin registers a post_type of "announcements"
• Add a meta_box to contain the on/off switch, url and button text
• Use the content of the post as the data inside the announcement

Now, Problems Start:

• Is there something specific i am doing that is hurting performance?
• Is there an easier way to do this without an entire custom plugin?
• On the front-end, since i just register a custom shortcode?
• will this code even execute on pages without the shortcode?

My plugin code is below, or take a look at the complete code

Complete Plugin Code ()

<section class="d-none mt-n7 p-0 position-relative mb-5" style="z-index:999;">
    <div class="container">
        <div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">
            <div class="align-self-center text-center text-md-left">
                <h3 class="mb-0">Placeholder For Special Offer or News (Shown When Activated)</h3>
            </div>
            <div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center">
                <button class="btn btn-white mb-0">Learn more!</button>
            </div>
        </div>
    </div>
</section>

Relevant parts of my plugin custom-announcements.php

Register the custom post type:

$args = array(
    'labels' => $labels,
    'singular_label' => __('Announcement', 'custom-announcements'),
    'public' => true,
    'capability_type' => 'post',
    'rewrite' => false,
    'supports' => array('title', 'editor'),
);
register_post_type('announcements', $args);

Configure the metabox:

add_action( 'add_meta_boxes', 'ca_add_metabox' );

function ca_metabox( $post ) {
    $values = get_post_custom( $post->ID );
    $banner_enabled = isset( $values['ca_banner_enabled'] ) ? esc_attr( $values['ca_banner_enabled'][0] ) : '';
    $button_url = isset( $values['ca_url'] ) ? esc_attr( $values['ca_url'][0] ) : '';
    $button_title = isset( $values['ca_button_title'] ) ? esc_attr( $values['ca_button_title'][0] ) : '';
    wp_nonce_field( 'ca_metabox_nonce', 'metabox_nonce' );

Function that wires up the shortcode to display announcement:

 function ca_announce(){
  global $post;
  $html = '';

  $ca_a = new WP_Query( array(
       'post_type' => 'announcements',
       'posts_per_page' => 1,
       'meta_query' =>  array(
                         array(
                           'key' => 'ca_banner_enabled',
                           'value' => 'yes'
                          )
                        )
  ));

  if( $ca_a->have_posts() ) : while( $ca_a->have_posts() ) : $ca_a->the_post();
        $html .= '<section class="mt-n7 p-0 position-relative mb-5" style="z-index:999;">';
         $html .= '<div class="container">';
         $html .= '<div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">';
         $html .= '<div class="align-self-center text-center text-md-left">';
         $html .= '<h3 class="mb-0">' . get_the_content()  . '</h3>';
         $html .= '</div><div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center"><button class="btn btn-white mb-0">';
         $html .= get_post_meta($ca_a->ID, 'ca_button_title', true );
         $html .= '</button></div></div></div></section>';
         $html .= '';
         $html .= '';
  endwhile; endif;
  return $html;
 }

 add_shortcode( 'ca', 'ca_announce' );

In wordpress, in a particular page that is used as the homepage i have a section of HTML used for an announcement. I am wanting to enable someone to easily customize this section from the dashboard, as well as turn it on/off.

The Requirements:

• Only this 1 announcement will ever exist (no need to show multiple)
• Inside the H3 section the user can edit the text
• Allow the user to change the "Learn More" button text
• Allow the user to specify the button URL

Initial Approach:

• Plugin registers a post_type of "announcements"
• Add a meta_box to contain the on/off switch, url and button text
• Use the content of the post as the data inside the announcement

Now, Problems Start:

• Is there something specific i am doing that is hurting performance?
• Is there an easier way to do this without an entire custom plugin?
• On the front-end, since i just register a custom shortcode?
• will this code even execute on pages without the shortcode?

My plugin code is below, or take a look at the complete code

Complete Plugin Code (https://pastebin/N5BgUSqa)

<section class="d-none mt-n7 p-0 position-relative mb-5" style="z-index:999;">
    <div class="container">
        <div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">
            <div class="align-self-center text-center text-md-left">
                <h3 class="mb-0">Placeholder For Special Offer or News (Shown When Activated)</h3>
            </div>
            <div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center">
                <button class="btn btn-white mb-0">Learn more!</button>
            </div>
        </div>
    </div>
</section>

Relevant parts of my plugin custom-announcements.php

Register the custom post type:

$args = array(
    'labels' => $labels,
    'singular_label' => __('Announcement', 'custom-announcements'),
    'public' => true,
    'capability_type' => 'post',
    'rewrite' => false,
    'supports' => array('title', 'editor'),
);
register_post_type('announcements', $args);

Configure the metabox:

add_action( 'add_meta_boxes', 'ca_add_metabox' );

function ca_metabox( $post ) {
    $values = get_post_custom( $post->ID );
    $banner_enabled = isset( $values['ca_banner_enabled'] ) ? esc_attr( $values['ca_banner_enabled'][0] ) : '';
    $button_url = isset( $values['ca_url'] ) ? esc_attr( $values['ca_url'][0] ) : '';
    $button_title = isset( $values['ca_button_title'] ) ? esc_attr( $values['ca_button_title'][0] ) : '';
    wp_nonce_field( 'ca_metabox_nonce', 'metabox_nonce' );

Function that wires up the shortcode to display announcement:

 function ca_announce(){
  global $post;
  $html = '';

  $ca_a = new WP_Query( array(
       'post_type' => 'announcements',
       'posts_per_page' => 1,
       'meta_query' =>  array(
                         array(
                           'key' => 'ca_banner_enabled',
                           'value' => 'yes'
                          )
                        )
  ));

  if( $ca_a->have_posts() ) : while( $ca_a->have_posts() ) : $ca_a->the_post();
        $html .= '<section class="mt-n7 p-0 position-relative mb-5" style="z-index:999;">';
         $html .= '<div class="container">';
         $html .= '<div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">';
         $html .= '<div class="align-self-center text-center text-md-left">';
         $html .= '<h3 class="mb-0">' . get_the_content()  . '</h3>';
         $html .= '</div><div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center"><button class="btn btn-white mb-0">';
         $html .= get_post_meta($ca_a->ID, 'ca_button_title', true );
         $html .= '</button></div></div></div></section>';
         $html .= '';
         $html .= '';
  endwhile; endif;
  return $html;
 }

 add_shortcode( 'ca', 'ca_announce' );

• custom-post-types
• plugins
• performance

Share Improve this question asked Aug 23, 2019 at 12:42 DDullaDDulla 11122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The fastest and easiest way would be to use Advanced Custom Fields Pro (ACF) to create a custom metabox for your announcement. They have a resources page with lots of examples for you to pick from, and even more recipes available from community contributions. Tuts Plus has a great tutorial for getting started with ACF.

In my case, I also created an "Enable/Disable" button to turn the ACF field off, when I didn't want it. So, on pages where I need a Google Map, I enable the ACF field for Google Maps, and enter my mapping coordinates into a list of fields.

ACF has a "builder" to help you create all the fields and conditions you need. This includes being able to specify pages/posts/CPTs to display your content, as well as users/roles permitted to modify it. There is also an exporter, which provides all the code you need to add features into your theme.

I am not affiliated in any way with ACF, nor any company, relative, or friends related to ACF and/or its affiliates.

I have built tons of customizations for dozens of web sites using only ACF. It has saved me LOADS of hours and headaches.

本文标签： custom post typesSimple way to hideshow an announcement (just a div) on homepage