Add talking function to WordPress and modify its style

Half a month ago, I added the "talk" function to my blog because I saw a beautiful piece of CSS on Naughty's Blog and used it. After many references, I finally finished this thing that can be published in the background.

As CC BY-SY-NC followed by this blog is the same as the previous article, I publish these contents here.

Principles and requirements

WordPress publishes text either on a page or in an article, so you can't get rid of these two things when you publish something.

The structure of talk objects is consistent, so each talk is saved in the form of user-defined article type.

When displaying, you can find all the articles under the corresponding article type and output the content as required.

Of course, because there may be too many articles to talk about, the page turning function should be implemented.

To sum up, my needs are three:

1. Speak in the background;
2. Show and talk;
3. Talk about content pagination

Start adding

1. Register custom article type

These codes are not difficult to understand and need no explanation. Copy it to the theme's funcion.php.

 //Reprinted from Wang Boyuan's blog //Register and talk about type articles add_action('init', 'my_custom_init'); function my_custom_init() { $labels=array ('name '=>' Tell me ', 'singular_name '=>' Tell me ', 'add_new'=>'Say something', 'add_new_item'=>'Speak up', 'edit_item'=>'Edit it', 'new_item'=>'Tell me more', 'view_item'=>'View and tell', 'search_items'=>'Search and talk', 'not_found'=>'No comment', 'not_found_in_trush'=>'There is no abandoned talk', 'parent_item_colon'=>'', 'menu_name'=>'Tell me'); $args = array( 'labels' => $labels, 'public' => true,  'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true,  'exclude_from_search' =>true, 'query_var' => true,  'rewrite' => true, 'capability_type' => 'post', 'has_archive' => false, 'hierarchical' => false,  'menu_position' => null, 'supports' => array('editor','author','title', 'custom-fields') ); register_post_type('shuoshuo',$args);  } //End

If you have the right method, you can already see the talk about publication and control in the background of wp.

2. Add a talk page template

We need to print the talk list in the page, so create a page template. The method of creating a page template is simple, as long as you declare it before the page Template Name: XX OK.

To be consistent with the theme style, you can copy a copy of the page.php , observe its structure, generally get_header Start with get_footer end.

There will be a master between them div Containers, such as <div class="content"> , where you can find the code of query and print content.

According to its structure, what we need to modify is the page content code.

Well, the idea is: 1 Declaration page template; 2. Modify the content query code.

2.1 Statement page template

Suppose you have copied a copy of page.php and named it page-shuoshuo.php 。

I wrote the template declaration on the first line.

 <? php /* Template Name: author: yetu url:  http://www.azimiao.com */ get_header(); ?>

2.2 Modify Content Query Code

Customize a query to obtain the corresponding type of articles and print them.

Here is a copy of the naughty blog CSS Style, and referred to the custom query and paging code of taste design.

 <div class="content"> <link rel="stylesheet" href="//css.azimiao.com/shuoshuo.css" type="text/css"> <div id="article"> <h1><a href="<?php the_permalink() ?> " rel="bookmark"><?php the_title();?></ a></h1> <div class="position">Current position:<a href="<? Php echo get_option ('home ');?>/ ">Home</a>» Talk about</div> <div id="article_content"> <ul class="cbp_tmtimeline"> <? php $temp = $wp_query; $wp_query = null; $wp_query = new WP_Query(); $show_posts = 4; // Number of pages displayed per page $permalink = 'Post name'; //  Default, Post name $post_type = 'shuoshuo'; // Know the current URI $req_uri = $_SERVER['REQUEST_URI']; // Permalink set to default if ($permalink == 'Default') { $req_uri = explode('paged=', $req_uri); if ($_GET['paged']) { $uri = $req_uri[0] . ' paged='; } else { $uri = $req_uri[0] . '& paged='; } //Permalink is set to Post name } elseif ($permalink == 'Post name') { if (strpos($req_uri, 'page/') !==  false) { $req_uri = explode('page/', $req_uri); $req_uri = $req_uri[0]; } $uri = $req_uri . ' page/'; } //Query //echo 'showposts='.$ show_posts.'&post_type='. $post_type .'&paged='.$paged; $wp_query->query('showposts=' . $show_posts . '&post_type=' . $post_type . '&paged=' . $paged); //count posts in the custom post type $count_posts = wp_count_posts('projects'); while ($wp_query->have_posts()) : $wp_query->the_post();?> <li> <time class="cbp_tmtime"> <span><? php the_time('y-n-j');?></ span> </time> <div class="cbp_tmlabel"> <p><? php the_content();?></ p> </div> </li> <? php endwhile;?> </ul> </div> <? php comments_template();?> </div> </div>

2.3 Pagination

The above code has realized the paging function. According to the query parameters given in the code, it will only print out the specified number of entries, and different pages will be used /page/2 type url Turn the page.

However, because there is no page turning button at this time, that is, no page number navigation and corresponding buttons, you cannot turn pages explicitly.

Add the paging area div container at the required position of the above article template. I added to

After.

 <!--  Paging --> <div class="pagination"> <? php  by_pagenavi(); ?> </div>

The paging navigation display method and the corresponding css style can be reproduced from Wang Boyuan's blog and placed in an appropriate location.

 <? php //Pagination navigation display method //Reprinted from Wang Boyuan's blog function by_pagenavi($before = '', $after = '', $p = 2) { if (is_singular()) return; global $wp_query, $paged; $max_page = $wp_query->max_num_pages; if ($max_page == 1) return; if (empty($paged)) $paged = 1; echo $before; If ($paged>1) by_p_link ($paged - 1, 'Previous','<span class="pg item pg nav item pg prev">',' Previous'); If ($paged>$p+1) by_p_link (1, 'Home', '<span class="pg item">', 1); for ($i = $paged - $p; $ i <= $paged + $p; $i++) { if ($i > 0 && $i <= $max_page) $i == $paged ?  print "<span class='pg-item pg-item-current'><span class='current'>{$i}</span></span>" : by_p_link($i, '', '<span class="pg-item">', $i); } If ($paged<$max_page - $p) by_p_link ($max_page, 'last page', '<span class="pg item">...</span><span class="pg item">', $max_page); If ($paged<$max_page) by_p_link ($paged+1, 'Next Page', '<span class="pg item pg nav item pg text">', 'Next Page'); echo $after; } function by_p_link($i, $title = '', $linktype = '', $prevnext = '') { If ($title=='') $title="Browse page {$i}"; if ($linktype == '') { $linktext = $i; } else { $linktext = $linktype; } echo "{$linktext}<a style = 'border-bottom:1px solid #eaeaea ! important;' href='", esc_html(get_pagenum_link($i)), "' title='{$title}' class='navbutton'>{$prevnext}</a></span>"; } ?>

 /* Paging Navigation Style Reprinted from Wang Boyuan's blog */ div.pagination { padding: 0px; margin: 25px 0 40px; text-align: center; font-size: 15px; line-height: 17px; position: relative; } .pagination .pg-filler-1 { width: 35%; } .pagination .pg-filler-2 { width: 40%; } .pagination .pg-item a, .pagination .pg-item .current, .pagination .pg-dots, .pagination .pg-item .disabled { display: inline-block; color: #666; padding: 9px 13px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-decoration: none; margin: 0 1px; min-width: 10px; } .pagination .pg-item a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -ms-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .pagination .pg-next { position: absolute; right: 20px; } .pagination .pg-prev { position: absolute; left: 20px; } .pg-nav-item { text-transform: uppercase; } .pagination .pg-item .current, .pagination .pg-item a:hover { background: #ff5e52; color: #fff; } div.pagination span.current, div.pagination a { padding: 0px; text-decoration: none; } div.pagination a.navbutton { margin: 0 2px; border: 1px solid #eaeaea; }

Usage and effect

Post a page in the background, talk about the selection of page template, and link the page No Set as shuoshuo, page link No Set as shuoshuo, page link No Let's say it, otherwise your page may appear 404~If the page link conflicts with the registered article type, there may be unexpected problems~.
Post some comments on the background, visit the above page to see the effect~

Friendly Reminder

If you want to modify the output content, it is also very simple. For example, if you want to add a click to talk about the jump to talk about the details, you just need to take out the link during the query and put an a tag on the single talk!

References

1. [Content] [Wang Boyuan's blog] Wang Boyuan writes a talk/short microblog on Wordpress
2. [Content] [Naughty's Blog] Naughty's Blog copied a talk page
3. [Content] [Juevi Design] Juevi Design WordPress custom article type paging list call problem