WordPress Website Building Guide (2)

Preface

I've been unwilling to upgrade wordpress version and twentytwelve theme, because I've added some custom things and made quite a few modifications to the original template, worried that once upgraded I'd have to redo everything

Taking advantage of the redesign, I clicked update, and as a result spent almost a whole day cleaning up... Increasingly dislike wordpress

1. Add Custom Pages

The steps are relatively simple, but not very friendly:

Enter wordpress/wp-content/themes/twentytwelve/ find page.php, download to local

Modify file header comments, for example:

<?php
/*
Template Name: My Page Name
*/
?>

My Page Name can be changed to custom name, will appear in template dropdown list

P.S. Although setting template name in comment form is not very scientific, but wp is like this, barely accept it

Modify file content, add custom logic, for example:

<?php
/*
Template Name: My Page Name
*/
get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">
            <?php
                query_posts('cat=51');

                while ( have_posts() ) : the_post();
                get_template_part('content');
                comments_template( '', true );
                endwhile; // end of the loop.

                wp_reset_query();   // reset query
            ?>
        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Save, modify filename, upload to wp current theme template directory, such as wordpress/wp-content/themes/twentytwelve/page-templates
Enter backend/Pages/, create new page, title is the words that will be displayed in homepage navigation bar; select template (select My Page Name from dropdown list); click update (article content doesn't need to be filled)
After update, click view article

Special note: Once theme is updated, these custom pages will all be deleted, suggest not upgrading, if must upgrade, remember to backup

2. Get Latest Article List

Querying article information mainly uses one function: query_posts

Here provides a simple utility function:

// Get article list, generates:
// <li><h2 class="icon icon-item"><a href="blog/响应时间的 3 个重要界限/" target="_blank">响应时间的 3 个重要界限</a></h2></li>
// Specific style classes can be modified yourself
function getPostList($strFilter) {
    global $post;

    query_posts($strFilter);

    while (have_posts()): the_post();
    echo '<li><h2 class="icon icon-item"><a href="';
    echo the_permalink();
    echo '" target="_blank">';
    echo mb_strimwidth(strip_tags(apply_filters('the_title', $post->post_title)), 0, 50," ");
    echo '</a></h2></li>';
    endwhile;
    
    wp_reset_query();   // reset query
}

Utility function simple usage examples:

Get latest 10 articles list

getPostList('showposts=10');
Get latest 10 articles list from a certain category

getPostList('cat=301&showposts=10');

cat value is interesting, cannot be directly seen in backend either, has easter egg: Enter backend/Articles/Categories, mouse hover on category name, look at URL displayed in browser's lower left corner, something like tag_ID=133, 133 is cat's value

For more information about query_posts function please check WordPress Function: query_posts (Query Articles)

3. How to Use wp API Outside wordpress Directory

Usefulness is not particularly great, for example all level-2 pages under this site's root directory are outside wordpress directory (wp is hidden behind custom homepage), so how to get article list on homepage?

wp's API entry is wordpress/wp-load.php, in other words, as long as this file is included, can use wp's provided API, example code is as follows:

define('WP_USE_THEMES', false); // Don't use themes
require('./cms/wordpress/wp-load.php');

Another application scenario is developing custom interfaces on basis of wp API, returning JSON data and such, such things are not necessary and not recommended to put in wp directory (what if accidentally click update and delete these files?), creating a new directory outside wp directory to put them in is very reasonable, also easier to maintain

4. How to Solve Google Font Blocking Page Problem

After upgrading theme found page loads for a long time, discovered in Network panel it's google font's (fonts.googleapis.com) fault, statement requesting font resources is in wordpress/wp-content/themes/twentytwelve/functions.php, although not very scientific, but indeed defined here

There are 3 solutions:

Replace Google fonts with 360 fonts (recommended practice)

Specific practice is to change https://fonts.googleapis.com in functions.php to http://fonts.useso.com (note http, latter doesn't support https)

Download all requested fonts, upload to own directory, change Google font URL to font URL on server
Delete related statements, don't load these fonts

Change twentytwelve_get_font_url function to:

    function twentytwelve_get_font_url() {
        return '';
    }

These fonts are not very useful for Chinese sites, removing them directly is fine

5. Modify entry-meta

Default entry-meta is very ugly, for example:

This entry was posted on xxx, belongs to xx category, tagged with x,x,x.

Wanting to change this is quite laborious, written in configuration file (localization file): wordpress/wp-content/languages/themes/twentytwelve-zh_CN.mo and twentytwelve-zh_CN.po, need to use PoEdit, specific operation steps please check How to Open mo File and Modify PoEdit, feels a bit like decompiling~

After modification upload to original path~~and it's done~~ (still suggest backup before modifying, to avoid tragedy)

Note: Some themes will repeatedly automatically generate po and mo files, causing modifications to become invalid, so after uploading also need to modify mo file's read/write permissions, change to 444 (-r--r--r--) read-only

6. Avatar Cannot Display

Avatar comes from www.gravatar.com, already blocked by great firewall, will cause backend to open extremely slowly, solution is to change to using https to request these avatar images, add following code in functions.php:

function get_ssl_avatar($avatar) {
   $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
   return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

Click update takes effect immediately, but avatar will become very large and ugly (default is 100*100px), suggest adding some style control (in style.css):

.avatar {
    width: 50px !important;
    height: 50px !important;
}

P.S. functions.php and style.css that need to be modified above can be directly selected in backend/Appearance/Edit to edit online