function.php · Wordpress主題開發手冊

**章節導航：** [TOC] # 默認加載CSS/JS及標題問題 ## 1.去掉默認頭部底部多余加載信息 ``` /* * 去除頭部多余加載信息 * @link https://www.sucaihu.com/14471.html */ remove_action( 'wp_head', 'wp_generator' );//移除WordPress版本 remove_action( 'wp_head', 'rsd_link' );//移除離線編輯器開放接口 remove_action( 'wp_head', 'wlwmanifest_link' );//移除離線編輯器開放接口 remove_action( 'wp_head', 'index_rel_link' );//去除本頁唯一鏈接信息 remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); //清除前后文信息 remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );//清除前后文信息 remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );//清除前后文信息 remove_action( 'wp_head', 'feed_links', 2 );//移除文章和評論feed remove_action( 'wp_head', 'feed_links_extra', 3 ); //移除分類等feed remove_action( 'wp_head', 'rest_output_link_wp_head', 10 ); //移除wp-json remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); //頭部的JS代碼 // add_filter( 'show_admin_bar', '__return_false' );//移除wp-json鏈接 remove_action( 'wp_head', 'rel_canonical' ); //rel=canonical remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 ); //rel=shortlink remove_action( 'wp_head', 'print_emoji_detection_script', 7 );//移除emoji載入js remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );//emoji載入js remove_action( 'wp_print_styles', 'print_emoji_styles' );//移除emoji載入css remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_action( 'wp_head', 'rest_output_link_wp_head', 10 ); remove_action('wp_head','wp_resource_hints',2);//移除dns-prefetch // 禁用 REST API、移除 wp-json @link https://www.hack520.com/474.html add_filter('rest_enabled', '_return_false'); add_filter('rest_jsonp_enabled', '_return_false'); remove_action( 'wp_head', 'rest_output_link_wp_head', 10 ); remove_action( 'wp_head', 'wp_oembed_add_discovery_links', 10 ); //移除頭部多余.recentcomments 樣式 function Fanly_remove_recentcomments_style() { global $wp_widget_factory; remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) ); } add_action( 'widgets_init', 'Fanly_remove_recentcomments_style' ); // 移除頭部多余block-library/style.min.css add_action('wp_enqueue_scripts', function () { wp_dequeue_style('wp-block-library'); }); // 移除底部wp-embed.min.js文件 function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); } add_action( 'init', 'disable_emojis' ); ``` ## 2.讓WordPress管理文檔標題 ``` /* * 讓WordPress管理文檔標題。 * 通過添加主題支持，我們聲明這個主題不使用 * 在文檔頭中使用ard編碼的<title>標簽，預計WordPress也會這樣做 * 為我們提供吧。 */ /* add_theme_support( 'title-tag' ); * 這里通過注釋代碼，刪除了<title>標簽。 */ ``` ## 3.自定義文章類型標題顯示問題 ``` /* * 自定義文章類型標題顯示問題 * 使用setTitle();代替wp_title(); * 因為現在不打算搞自定義文章類型，所以注釋掉。 */ function setTitle(){ $term = get_term_by('slug',get_query_var('term'),get_query_var('taxonomy')); echo $title = $term->name; } ``` # 注冊導航菜單 ***** ``` /* * 注冊導航菜單 * 這里分別注冊了頭部導航、底部導航、內頁側欄導航，可根據需要增刪。 * 使用方法：在主題一個位置使用wp_nav_menu() */ register_nav_menus( array( 'header-menu' => esc_html__( 'Primary', 'wp_yiqi' ), 'footer-menu' => esc_html__( 'Footnav', 'wp_yiqi' ), // 'about-menu' => esc_html__( 'Aboutnav', 'wp_yiqi' ), ) ); /* * 刪除導航li的多余id和class */ // add_filter('nav_menu_css_class', 'rm_css_attributes_filter', 100, 1); add_filter('nav_menu_item_id', 'rm_css_attributes_filter', 100, 1); add_filter('page_css_class', 'rm_css_attributes_filter', 100, 1); function rm_css_attributes_filter($var) { return is_array($var) ? array() : ''; } ``` # 縮略圖問題 ***** ## 1.啟用對帖子和頁面的帖子縮略圖的支持 ``` /* * 啟用對帖子和頁面的帖子縮略圖的支持。 * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); ``` ## 2.注冊自定義尺寸的縮略圖 ``` /* * 注冊自定義尺寸的縮略圖 */ if (function_exists('add_image_size')){ add_image_size( 'news_list_size', 180, 125, true ); } /* * 響應式主題必須去掉縮略圖srcset屬性，否則移動端尺寸不一致 * 去除WordPress文章中圖片自動加的srcset屬性 * @link http://www.krseo.com/web/162.html */ add_filter( 'max_srcset_image_width', create_function('', 'return 1;')); ``` ## 3.文章自動調用縮略圖，后臺文章列表顯示縮略圖 ``` /* * WordPress文章自動調用縮略圖 * * 1.判斷文章是否設置了特色圖像，若有則顯示特色圖像； * 2.若沒有特色圖像時，查找文章中是否包含圖片，若有圖片，則調用第一張圖片； */ function autoset_featured() { global $post; $already_has_thumb = has_post_thumbnail($post->ID); if (!$already_has_thumb) { $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" ); if ($attached_image) { foreach ($attached_image as $attachment_id => $attachment) { set_post_thumbnail($post->ID, $attachment_id); } } } } add_action('the_post', 'autoset_featured'); add_action('save_post', 'autoset_featured'); add_action('draft_to_publish', 'autoset_featured'); add_action('new_to_publish', 'autoset_featured'); add_action('pending_to_publish', 'autoset_featured'); add_action('future_to_publish', 'autoset_featured'); /* * 為WordPress后臺文章列表添加縮略圖 * * @link https://zmingcx.com/back-to-list-of-articles-to-add-thumbnail-wordpress.html */ if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) { // for post and page add_theme_support('post-thumbnails', array( 'post', 'page' ) ); function fb_AddThumbColumn($cols) { $cols['thumbnail'] = __('Thumbnail'); return $cols; } function fb_AddThumbValue($column_name, $post_id) { $width = (int) 160; $height = (int) 120; if ( 'thumbnail' == $column_name ) { // thumbnail of WP 2.9 $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true ); // image from gallery $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') ); if ($thumbnail_id) $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true ); elseif ($attachments) { foreach ( $attachments as $attachment_id => $attachment ) { $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true ); } } if ( isset($thumb) && $thumb ) { echo $thumb; } else { echo __('None'); } } } // for posts add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' ); add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 ); // for pages add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' ); add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 ); } ``` ## 4.為WordPress后臺文章列表添加縮略圖 ``` /* * 為WordPress后臺文章列表添加縮略圖 * * @link https://zmingcx.com/back-to-list-of-articles-to-add-thumbnail-wordpress.html */ if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) { // for post and page add_theme_support('post-thumbnails', array( 'post', 'page' ) ); function fb_AddThumbColumn($cols) { $cols['thumbnail'] = __('Thumbnail'); return $cols; } function fb_AddThumbValue($column_name, $post_id) { $width = (int) 160; $height = (int) 120; if ( 'thumbnail' == $column_name ) { // thumbnail of WP 2.9 $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true ); // image from gallery $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') ); if ($thumbnail_id) $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true ); elseif ($attachments) { foreach ( $attachments as $attachment_id => $attachment ) { $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true ); } } if ( isset($thumb) && $thumb ) { echo $thumb; } else { echo __('None'); } } } // for posts add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' ); add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 ); // for pages add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' ); add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 ); } ``` # 設定摘要的長度 ***** ``` //設定摘要的長度及結尾 function new_excerpt_length($length) { return 120; } add_filter('excerpt_length', 'new_excerpt_length'); // 把摘要默認的結尾[...]換成... function new_excerpt_more(){ global $post; return '...'; } add_filter('excerpt_more', 'new_excerpt_more'); ``` # 文章相關問題 ## 1.WordPress實現不同分類顯示不同的文章數量分頁 ``` /* * WordPress實現不同分類顯示不同的文章數量分頁 * @link https://www.xuewangzhan.net/wpbbs/17057.html */ function filter_pre_get_posts( $query ){ if ( $query->is_main_query() ){ $num = ''; // if ( is_category(array('news')) ){ $num = 3; } // 為指定ID的欄目設置每頁顯示個數 // if ( is_taxonomy_hierarchical('product', 'img') ){ $num = 9; } // 為指定自定義分類法設置每頁顯示個數 //if ( is_category(array(10)) ){ $num = 14; } //if ( is_category(array('questions')) ){ $num = 14; } // if ( in_category(array('jhg','hjj','yjj','xxj','jlg')) ){ $num = 10; } //if ( is_home() ){ $num = 10; } // else if ( is_category() ){ $num = 10; } // else if ( is_tag() ){ $num = 10; } // else if ( is_date() ){ $num = 10; } // else if ( is_author() ){ $num = 10; } // else if ( is_search() ){ $num = 10; } // else if ( is_archive() ){ $num = 10; } if ( '' != $num ){ $query->set( 'posts_per_page', $num ); } } return $query; } add_action('pre_get_posts', 'filter_pre_get_posts'); ``` ## 2.獲取文章所在的自定義分類法分類項目 ``` /* * 獲取文章所在的自定義分類法分類項目 * 本主題不使用自定義分類法，所以注釋掉 */ function custom_taxonomies_terms_links(){ //根據當前文章ID獲取文章信息 $post = get_post( $post->ID ); //獲取當前文章的文章類型 $post_type = $post->post_type; //獲取文章所在的自定義分類法 $taxonomies = get_object_taxonomies( $post_type, 'objects' ); $out = array(); foreach ( $taxonomies as $taxonomy_slug => $taxonomy ){ $term_list = wp_get_post_terms($post->ID, $taxonomy_slug, array("fields" => "all")); echo $term_list[0]->name; //顯示文章所處的分類中的第一個 } return implode('', $out ); } ``` ## 3.文章列表頁分頁 ``` /* 文章列表頁分頁 * 在文章列表循環結束后調用mo_paging()方法即可顯示 * @link https://www.daimadog.com/3272.html */ function mo_paging() { $p = 3; if ( is_singular() ) return; global $wp_query, $paged; $max_page = $wp_query->max_num_pages; if ( $max_page == 1 ) return; echo '<div class="pagination"><dl>'; if ( empty( $paged ) ) $paged = 1; echo '<dd class="prev-page">'; previous_posts_link('上一頁'); echo '</dd>'; if ( $paged > $p + 1 ) _paging_link( 1, '<dd>第一頁</dd>' ); if ( $paged > $p + 2 ) echo "<dd><span>···</span></dd>"; for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<dd class=\"active\"><span>{$i}</span></dd>" : _paging_link( $i ); } if ( $paged < $max_page - $p - 1 ) echo "<dd><span> ... </span></dd>"; echo '<dd class="next-page">'; next_posts_link('下一頁'); echo '</dd>'; echo '<dd><span>共 '.$max_page.' 頁</span></dd>'; echo '</dl></div>'; } function _paging_link( $i, $title = '' ) { if ( $title == '' ) $title = "第 {$i} 頁"; echo "<dd><a href='", esc_html( get_pagenum_link( $i ) ), "'>{$i}</a></dd>"; } ``` ### 分頁CSS樣式 ``` /* 分頁CSS樣式 */ .pagination{clear: both; text-align: center; font-size: 12px; padding: 30px 0 0;} .pagination dl{display: inline-block; margin-left: 0; margin-bottom: 0; padding: 0;} .pagination dl>dd{display: inline;} .pagination a:hover{background-color: #e60013; color: #fff;} .pagination dl>.active>a, .pagination dl>.active>span{background-color: #e60013; color: #fff; cursor: default;} .pagination dl>dd>a, .pagination dl>dd>span{margin: 0 2px; float: left; padding: 7px 14px; background-color: #f6f6f6; color: #666; border-radius: 2px;} ``` ## 4.如何獲得WordPress文章瀏覽次數的統計 ``` /* 如何獲得WordPress文章瀏覽次數的統計 * 在需要顯示該統計次數的地方使用下面的代碼調用即可：文章被閱讀：<?php post_views(' ', ' 次'); ?> */ function record_visitors() { if (is_singular()) { global $post; $post_ID = $post->ID; if($post_ID) { $post_views = (int)get_post_meta($post_ID, 'views', true); if(!update_post_meta($post_ID, 'views', ($post_views+1))) { add_post_meta($post_ID, 'views', 1, true); } } } } add_action('wp_head', 'record_visitors'); /// 函數名稱：post_views /// 函數作用：取得文章的閱讀次數 function post_views($before = '(點擊 ', $after = ' 次)', $echo = 1) { global $post; $post_ID = $post->ID; $views = (int)get_post_meta($post_ID, 'views', true); if ($echo) echo $before, number_format($views), $after; else return $views; } ``` # 啟用媒體文件上傳自動按年月日重命名 ***** ``` /** * 啟用媒體文件上傳自動按年月日重命名 */ function git_upload_filter($file) { $time = date("YmdHis"); $file['name'] = $time . "" . mt_rand(1, 100) . "." . pathinfo($file['name'], PATHINFO_EXTENSION); return $file; } add_filter('wp_handle_upload_prefilter', 'git_upload_filter'); ``` # 在后臺“外觀”菜單中添加【主題設置】這個子菜單 ***** ``` /* * 在后臺“外觀”菜單中添加【主題設置】這個子菜單 * add_theme_page()：給“外觀”導航創建子菜單； * 參數解說： * 參數1-----標題的內容 * 參數2-----顯示在后臺左邊菜單的標題 * 參數3-----訪問這個頁面需要的權限 * 參數4-----別名，需要獨一無二哦 * 參數5-----執行的函數（我們自定義的函數） * * add_action()：這是一個添加勾子的函數，這里將“Themes_Set”函數添加到“admin_menu”后臺菜單的勾子中。 * * @link http://wanlimm.com/77202006258703.html */ function Themes_Set(){ add_theme_page( 'wp_yiqi主題設置', 'wp_yiqi主題設置', 'administrator', 'wp_yiqi_slug','ssmay_set'); } add_action('admin_menu', 'Themes_Set'); function ssmay_set(){ //主題設置函數 include("theme_set.php");//這里是自己創建的一個php文件，用來設置選項內容 } ``` # 后臺開啟友情鏈接功能 ***** ``` /** * 開啟wordpress友情鏈接管理 * * 使用方法： * <ul class="dhnblog_link"><center> * <li>友情鏈接: <?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?></li> * </ul> * * @link https://blog.csdn.net/qq_39086902/article/details/105523963 */ add_filter( 'pre_option_link_manager_enabled', '__return_true' ); ``` # 排隊引入css樣式和js腳本 ***** ``` /** * 排隊引入css樣式和js腳本。 * 模板中通過使用wp_head()和wp_footer()分別來引入頁頭頁腳的css和js文件 * 在WordPress管理后臺正確加載js和css腳本 * @link https://www.wpdaxue.com/wordpress-admin-enqueue-scripts.html * * 使用 wp_enqueue_style() 函數引入css文件教程： * wp_enqueue_style( $handle, $src, $deps, $ver, $media ); * -------------------------------------------------------- * $handle（字符串，必需）是你的樣式表唯一名稱。其他函數將使用這個“handle”來排隊并打印樣式表。 * $src（字符串，必需）指的是樣式表的URL。您可以使用函數，如 get_template_directory_uri() 來獲取主題目錄中的樣式文件。永遠不要去想硬編碼了！ * $deps （數組，可選）處理相關樣式的名稱。如果丟失某些其他樣式文件將導致你的樣式表將無法正常工作，你可以使用該參數設置“依賴關系”。 * $ver （字符串或布爾型，可選）版本號。你可以使用你的主題的版本號或任何一個你想要的。如果您不希望使用一個版本號，將其設置為null。默認為false，這使得WordPress的添加自己的版本號。 * $media （字符串，可選）是指CSS的媒體類型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用這個，那就不使用它。默認為“all”。 * @link https://www.wpdaxue.com/loading-css-into-wordpress.html * * 使用 wp_enqueue_script() 引入js文件 * wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); * -------------------------------------------------------- * $handle（字符串，必需）是你的樣式表唯一名稱。其他函數將使用這個“handle”來排隊并打印樣式表。 * $src（字符串，必需）指的是樣式表的URL。您可以使用函數，如 get_template_directory_uri() 來獲取主題目錄中的樣式文件。永遠不要去想硬編碼了！ * $deps （數組，可選）處理相關樣式的名稱。如果丟失某些其他樣式文件將導致你的樣式表將無法正常工作，你可以使用該參數設置“依賴關系”。 * $ver （字符串或布爾型，可選）版本號。你可以使用你的主題的版本號或任何一個你想要的。如果您不希望使用一個版本號，將其設置為null。默認為false，這使得WordPress的添加自己的版本號。 * $in_footer 是否在</body>之前而不是<head>中加載腳本。默認為'false'。 * @link https://www.wpdaxue.com/how-to-add-css-and-javascript-to-wordpress-theme.html * */ function wp_yiqi_scripts() { // 加載css wp_enqueue_style( 'wp_yiqi-style', get_stylesheet_uri(), array(), _S_VERSION ); wp_enqueue_style( 'wp_yiqi-main', get_template_directory_uri() . '/assets/css/main.css', array(), _S_VERSION ); wp_enqueue_style( 'wp_yiqi-flexslider-css', '//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css', array(), _S_VERSION ); // 加載頁眉js wp_enqueue_script('wp_yiqi-jquery', '//cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js', array(), _S_VERSION, false ); wp_enqueue_script('wp_yiqi-flexslider-js', '//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js', array(), _S_VERSION, false ); wp_enqueue_script( 'wp_yiqi-header', get_template_directory_uri() . '/assets/js/header.js', array(), _S_VERSION, false ); // 加載頁腳js if ( is_home() || is_front_page() ) { //判斷首頁與內頁 wp_enqueue_script( 'wp_yiqi-footer-index', get_template_directory_uri() . '/assets/js/footer-index.js', array(), _S_VERSION, true ); } else { wp_enqueue_script( 'wp_yiqi-footer-sidebar', get_template_directory_uri() . '/assets/js/footer-sidebar.js', array(), _S_VERSION, true ); } wp_enqueue_script( 'wp_yiqi-footer', get_template_directory_uri() . '/assets/js/footer.js', array(), _S_VERSION, true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'wp_yiqi_scripts' ); ``` # 自動使用文章ID作為別名（slug） ***** 為了安全起見，請先備份網站的數據庫，然后再按照下文操作！ ## 1.更改固定鏈接結構假設你原來的固定鏈接結構設置為*/%post\_id%*，現在你可以將它改為*/%postname%*，這時候你會發現，新建文章和老文章都使用文章標題作為別名 ## 2.批量修改老文章的別名為ID 將下面的代碼添加到網站根目錄的 wp-config.php 的最底部，保存后訪問一次網站首頁（你將看到瀏覽器一直都在努力打開網頁，不要急，耐心等待，直到網頁真正打開，所需時間看文章數和網絡情況而定）。**網頁打開后，刪除剛剛添加到 wp-config.php 的代碼！** ~~~ /** * 批量更改舊文章的別名為ID * 使用方法：將代碼添加到網站根目錄的 wp-config.php 的最底部，訪問一次網站首頁，等頁面打開后，再刪除這些代碼 * https://www.wpdaxue.com/wordpress-using-post-id-as-slug.html */ // 添加一個變量來包容文章標題數組，防止重復操作 $slug_done = array(); // 查詢所有文章 $posts = $wpdb->get_results( " SELECT `ID`, `post_title` FROM `" . $wpdb->posts . "` WHERE `post_type` = 'post' " ); // 輸出文章 foreach( $posts AS $single ) { $this_slug = $single->ID; $slug_done[] = $this_slug; // 使用文章ID替換文章原來的別名 $wpdb->query( " UPDATE `" . $wpdb->posts . "` SET `post_name` = '" . $this_slug . "' WHERE `ID` = '" . $single->ID . "' LIMIT 1 " ); } ~~~ ## 3.新文章自動使用ID作為別名將下面的代碼添加到主題的 functions.php ，新建的文章都會自動使用ID作為別名 ~~~ /** ?* 新文章自動使用ID作為別名 ?* 作用：即使你設置固定連接結構為 %postname% ，仍舊自動生成 ID 結構的鏈接 ?* https://www.wpdaxue.com/wordpress-using-post-id-as-slug.html ?*/ add_action( 'save_post', 'using_id_as_slug', 10, 2 ); function using_id_as_slug($post_id, $post){ global $post_type; if($post_type=='post'){ //只對文章生效 // 如果是文章的版本，不生效 if (wp_is_post_revision($post_id)) return false; // 取消掛載該函數，防止無限循環 remove_action('save_post', 'using_id_as_slug' ); // 使用文章ID作為文章的別名 wp_update_post(array('ID' => $post_id, 'post_name' => $post_id )); // 重新掛載該函數 add_action('save_post', 'using_id_as_slug' ); }} } ~~~