wordpress导入主题---《Bootstrap实战》

2023年2月13日 265次阅读

《Bootstrap实战》
之前做项目时，用了bootstrap框架。只是简单用了，导航、栅栏布局。带着兴趣在图灵社区翻到一本《Bootstrap实战》，于是乎开始了bootstrap之旅。（之前在慕课上学过大漠老师的Bootstrap课程）
既然动手学习，那么必然会遇到各种各样的问题，当然解决问题就是在不断的提升自己。
问题产生在《Bootstrap实战》第三章里，WordPress自定义主题部分。
问题：严格按照操作步骤，将bootstappin-theme文件放在了，wordpress/wp-content/themes/路径下。
当然，也能启用主题了。
但是，自定义主题时，主题的样式（css）、js、jquery、ajax统统都不好使。
也就是实现不了书中给出的效果。
而书中提示说如果导航和文本不能应用Bootstrap的样式，则修改固定链接。
（于是，开始不断尝试修改固定链接）
于是乎，开始各种调试，各种修改固定链接，当然了最终的结果都是不好使。
debug时发现了一个惊人的现象，那就是当前主题加载样式和脚本的链接跟wordpress默认的主题加载的链接不一致。

默认主题加载链接：

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/wordpress/wp-content/themes/twentysixteen/assets/js/vendor/modernizr-2.6.2.min.js"

Bootstrappin-theme加载链接：

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/wordpress/assets/js/vendor/modernizr-2.6.2.min.js"

发现这个差异后，以此为突破口，找到当前主题文件下的 function.php

<?php
/**
 * Roots includes
 */
require_once locate_template('/lib/utils.php');           // Utility functions
require_once locate_template('/lib/init.php');            // Initial theme setup and constants
require_once locate_template('/lib/wrapper.php');         // Theme wrapper class
require_once locate_template('/lib/sidebar.php');         // Sidebar class
require_once locate_template('/lib/config.php');          // Configuration
require_once locate_template('/lib/activation.php');      // Theme activation
require_once locate_template('/lib/titles.php');          // Page titles
require_once locate_template('/lib/cleanup.php');         // Cleanup
require_once locate_template('/lib/nav.php');             // Custom nav modifications
require_once locate_template('/lib/gallery.php');         // Custom  modifications
require_once locate_template('/lib/comments.php');        // Custom comments modifications
require_once locate_template('/lib/rewrites.php');        // URL rewriting for assets
require_once locate_template('/lib/relative-urls.php');   // Root relative URLs
require_once locate_template('/lib/widgets.php');         // Sidebars and widgets
require_once locate_template('/lib/scripts.php');         // Scripts and stylesheets
require_once locate_template('/lib/custom.php');          // Custom functions

倒数第五行

require_once locate_template('/lib/rewrites.php');

当然可以直接将他注释掉（这是个重写文件，将/wordpress/wp-content/themes/twentysixteen/assets/ 重写为/assets/）

也可以根据目录提示打开rewrites.php

<?php
/**
 * URL rewriting
 *
 * Rewrites do not happen for multisite installations or child themes
 *
 * Rewrite:
 *   /wp-content/themes/themename/assets/css/ to /assets/css/
 *   /wp-content/themes/themename/assets/js/  to /assets/js/
 *   /wp-content/themes/themename/assets/img/ to /assets/img/
 *   /wp-content/plugins/                     to /plugins/
 *
 * If you aren't using Apache, alternate configuration settings can be found in the docs.
 *
 * 
 */
function roots_add_rewrites($content) {
  global $wp_rewrite;
  $roots_new_non_wp_rules = array(
    'assets/(.*)'          => THEME_PATH . '/assets/$1',
    'plugins/(.*)'         => RELATIVE_PLUGIN_PATH . '/$1'
  );
  $wp_rewrite->non_wp_rules = array_merge($wp_rewrite->non_wp_rules, $roots_new_non_wp_rules);
  return $content;
}

function roots_clean_urls($content) {
  if (strpos($content, RELATIVE_PLUGIN_PATH) > 0) {
    return str_replace('/' . RELATIVE_PLUGIN_PATH,  '/plugins', $content);
  } else {
    return str_replace('/' . THEME_PATH, '', $content);
  }
   return $content;
}

if (!is_multisite() && !is_child_theme()) {
  if (current_theme_supports('rewrites')) {
    add_action('generate_rewrite_rules', 'roots_add_rewrites');
  }

  if (!is_admin() && current_theme_supports('rewrites')) {
    $tags = array(
      'plugins_url',
      'bloginfo',
      'stylesheet_directory_uri',
      'template_directory_uri',
      'script_loader_src',
      'style_loader_src'
    );

    add_filters($tags, 'roots_clean_urls');
  }
}

通读代码不难发现，就是将加载链接重写为/asset

于是如果没有在function.php中注释掉

require_once locate_template('/lib/rewrites.php');

你也可以在rewrites.php中将重写代码注释掉

function roots_clean_urls($content) {
 /* if (strpos($content, RELATIVE_PLUGIN_PATH) > 0) {
    return str_replace('/' . RELATIVE_PLUGIN_PATH,  '/plugins', $content);
  } else {
    return str_replace('/' . THEME_PATH, '', $content);
  }*/
   return $content;
}

到此加载的问题解决了。

但是，wordpress应该如何支持重写加载呢。
网上给出了很多答案，例如修改wp-config.php文件，修改.htaccess文件等。

我的主题文件是根据书中提供的，但是根据书中的步骤无法实现相应的效果，于是就自己动手来解决了，不知道慕课上有多少小伙伴接触过Wordpress，也读过《Bootstrap实战》这本书，将这个问题处理的方法分享出来，希望遇到同样问题的小伙伴能得到帮助。

丙申年十月初四

点赞