20、使用 Ext JS 构建 WordPress 主题

使用 Ext JS 构建 WordPress 主题

最新推荐文章于 2025-08-19 12:51:56 发布

Python

最新推荐文章于 2025-08-19 12:51:56 发布

阅读量32

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握Ext JS：从入门到精通文章标签： Ext JS WordPress主题边框布局

本文链接：https://blog.youkuaiyun.com/python/article/details/149384431

掌握Ext JS：从入门到精通专栏收录该内容

21 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

使用 Ext JS 构建 WordPress 主题

1. 构建头部

在使用 Ext JS 构建 WordPress 主题时，首先要在主题目录中安装 Ext JS 库，并创建一个 js 文件来存放所需的 Ext JS 代码。具体操作如下：
1. 将 Ext JS SDK 复制到 ext-theme 文件夹中。
2. 创建一个名为 app.js 的新文件。

接下来，在 header.php 文件中添加以下代码：

<html>
<head>
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>   // #1
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); 
?>/extjs/resources/css/ext-all.css" type="text/css"/> // #2
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/> 
// #3
<script src="<?php bloginfo('stylesheet_directory'); ?>/extjs/ext-all.
js"></script> // #4
<script src="<?php bloginfo('stylesheet_directory'); ?>/app.js"></
script> // #5
</head>

这里使用了 bloginfo 函数来获取博客的各种信息，如博客名称、描述、主题目录、样式表 URL 等。具体说明如下：
| 代码编号 | 说明 |
| ---- | ---- |
| #1 | 显示博客名称和当前页面名称 |
| #2 | 导入 Ext JS 的 CSS 文件 |
| #3 | 导入主题的样式表文件 |
| #4 | 导入 Ext JS 的 JavaScript 文件 |
| #5 | 导入自定义的 app.js 文件 |

继续在 header.php 文件中添加以下代码：

<body>
<div id="headerCont" style="display:none;">  
  <!-- content here #6 -->
</div><!-- headerCont -->

在 headerCont 这个 div 中，将添加显示博客标题、描述、搜索字段和导航链接的代码。设置 style="display:none;" 是为了使用 Ext JS 组件来显示内容，而不是简单的 HTML。

将 #6 替换为以下内容：

<div id="top-bar-tile">
<div id="top-bar-content">
  <h1><a href="<?php bloginfo('url'); ?>">
    <?php bloginfo('name'); ?> <!-- #7 -->
  </a></h1>
  <span class="slogan">
    <?php bloginfo('description'); ?> <!-- #8 -->
  </span>
  <div id="search-box"> <!-- #9 -->
    <form method="get" id="searchform" action="" > 
      <input type="text" value="Search..." 
      onfocus="if(this.value == this.defaultValue) this.value = ''" 
      name="s" id="s" /> 
    </form>
  </div><!-- search-box -->
</div><!-- top-bar-content -->
</div><!-- top-bar-tile -->

这里将显示博客名称、描述和搜索框。

然后，使用 wp_nav_menu 函数动态显示博客页面的导航栏：

<div id="links" style="display:none;">
   <?php wp_nav_menu(array( 
   'menu' => 'mainnav', 
   'menu_class' => 'nav-bar-content', 
   'menu_id' => 'navigation', 
   'container' => false, 
   'theme_location' => 'primary-menu', 
   'show_home' => '1')); ?>
</div><!-- links -->

最后，在 index.php 文件中添加以下代码：

<?php get_header(); ?>

从 PHP 角度来看，这样就可以显示头部了。

2. 创建 Ext JS 代码

基本思路是创建一个使用边框布局的视口（viewport），在北部区域显示头部，南部区域显示底部，东部区域显示侧边栏，中心区域显示内容。在 app.js 文件中添加以下代码：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: Ext.getDom('headerCont').innerHTML, // #1
            border: false,
            margins: '0 0 5 0',
            height: 100,
            dockedItems: [{
                xtype: 'toolbar',
                itemId: 'navToolbar', // #2
                dock: 'bottom',
                ui: 'footer'
            }]
        }, {
            region: 'center',
            xtype: 'container',  // #3
            autoScroll: true,
            styleHtmlContent: true,   
            defaults: {
                xtype: 'panel', // #4
                padding: '5px',
                margins: '0 0 5 0',
                collapsible: true,
                styleHtmlContent: true,
                autoScroll: true
            }
        }]
    });
  // #5
});

在北部区域，使用 headerCont 这个 div 的 HTML 内容。为了显示导航链接，将其添加到 navToolbar 中。

在视口定义之后，添加以下代码：

var buttons = Ext.get(Ext.getDom('links')).dom.children[0]; // #1
var list = Ext.get(buttons).child('ul').dom.children; // #2
var toolbar = Ext.ComponentQuery.query('toolbar#navToolbar')[0]; 
Ext.Array.each(list, function(li) { // #3
    toolbar.add({// #4
        text: Ext.get(li).dom.children[0].firstChild.data, // #5
        href: Ext.get(li).dom.children[0].href, // #6
        hrefTarget: '_self' // #7
    });
});

这段代码会获取 links 这个 div 的第一个子元素，然后获取其 ul 子元素的所有子元素，将这些元素作为按钮添加到 navToolbar 中。

3. 构建底部

在 footer.php 文件中添加以下内容：

<div id="footer" style="display:none;">
  <center>Mastering ExtJS book - Loiane Groner -
    <a href="http://packtpub.com">http://packtpub.com
  </a></center>
</div>
<?php wp_footer(); ?>
<?php get_sidebar(); ?>
</body>
</html>

这里的 footer 这个 div 不会直接显示，其内容将在后续的容器中显示。同时，调用 wp_footer 函数和 get_sidebar 函数。

在 index.php 文件中调用 footer.php ：

<?php get_footer(); ?>

在 app.js 文件的视口中添加以下代码来显示底部：

{
    region: 'south',
    xtype: 'container',
    collapsible: true,
    html: Ext.getDom('footer').innerHTML,
    split: true,
    height: 25
}

4. 构建主页

index.php 文件的代码如下：

<?php get_header(); ?>
<div id="main">
<div id="content">
  <div id="contentCont" style="display:none;">  <!-- #1 -->
  <?php while ( have_posts() ) : the_post(); ?>
    <div id='post' class="post"> <!-- #2 -->
      <div id="title" style="display:none;"><?php the_title(); ?></
div> <!-- #3 -->
      <div class="post-details"> <!-- #4 -->
        <div class="post-details-left">
        Posted on <strong><?php the_date(); ?></strong> by 
<span class="author"><?php the_author(); ?></span> under <span 
class="author"><?php the_category(', '); ?></span>
        </div>
        <div class="post-details-right">
        <?php edit_post_link('Edit', '<span class="comment-
count">&nbsp;&nbsp;' , '</span>'); ?><span class="comment-count"><?php 
comments_popup_link('Leave a comment', '1 Comment', '% Comments'); 
?></span>
        </div>
      </div>

      <?php if ( is_archive() || is_search() ) : // Only display 
excerpts for archives and search. ?>
          <?php the_excerpt(); ?>
      <?php else : ?>
          <?php the_content('Read More'); ?>
      <?php endif; ?>
    </div><!-- post -->
  <?php endwhile; ?>
  </div><!-- contentCont -->
</div><!-- content -->
</div><!-- main -->
<?php get_footer(); ?>

在 contentCont 这个 div 中，使用 while ( have_posts() ) 循环来显示博客文章列表。

在 app.js 文件中添加以下代码来显示文章：

var posts = Ext.get(Ext.getDom('contentCont')).dom.children;
var panel = Ext.ComponentQuery.query('container[region=center]')[0];
Ext.Array.each(posts, function(post) {
    panel.add({
        title: Ext.get(post).child('div#title').getHTML(),
        html: post.innerHTML
    });
});

5. 构建侧边栏

在 sidebar.php 文件中添加以下代码：

<div id="sidebar" style="display:none;">
<!-- #1 -->
</div>

在 #1 中添加各种小部件：
1. 分类列表：

<div id="categoriesCont">  
  <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchic
al=0'); ?>
  </ul>
</div>

存档列表：

<div id="archivesCont">
  <ul class="list-archives">
    <?php wp_get_archives('type=monthly'); ?>
  </ul>
</div>

标签云：

<div id="tagsCont">
  <?php 
    $args = array(
      'smallest'  => 8,
      'largest'  => 16
     ); 

    wp_tag_cloud($args);
  ?>
</div>

最近文章：

<div id="recentCont">
  <ul class="list-archives">
    <?php
      $args = array( 'numberposts' => '5' );
      $recent_posts = wp_get_recent_posts( $args );
      foreach( $recent_posts as $recent ){
        echo '<li><a href="' . 
        get_permalink($recent["ID"]) . 
        '" title="Look '.
        esc_attr($recent["post_title"]).'" >' .   
        $recent["post_title"].'</a> </li> ';
      }
    ?>
  </ul>
</div>

自定义小部件：

<div id="booksCont">
  <!-- random HTML code -->
</div>

在 app.js 文件中添加以下代码来显示侧边栏：

{
    region: 'east',
    xtype: 'container',
    collapsible: true,
    autoScroll: true,
    styleHtmlContent: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    split: true,
    width: 200,
    defaults: {
        xtype: 'panel',
        padding: '5px',
        margins: '0 0 5 0',
        collapsible: true,
        styleHtmlContent: true,
        autoScroll: true
    },
    items: [{
        title: 'Categories',
        html: Ext.getDom('categoriesCont').innerHTML
    },{
        title: 'Archives',
        html: Ext.getDom('archivesCont').innerHTML
    },{
        title: 'Recent Posts',
        html: Ext.getDom('recentCont').innerHTML
    },{
        title: 'Tag Cloud',
        html: Ext.getDom('tagsCont').innerHTML
    },{
        title: 'My Books',
        html: Ext.getDom('booksCont').innerHTML
    }]
}

6. 构建单篇文章页面

single.php 文件的代码如下：

<?php get_header(); ?>
<?php /* If there are no posts to display, such as an empty archive 
page */ ?>
<?php if ( ! have_posts() ) : ?>
    <h1>Not Found</h1>
      <p>Apologies, but no results were found for the requested 
archive. Perhaps searching will help find a related post</p>
<?php endif; ?>
<div id="contentCont" style="display:none;"> 
<?php while ( have_posts() ) : the_post(); ?>
<div id='post' class="post">
  <div id="title" style="display:none;"><?php the_title(); ?></div>
  <div class="post-details">
    <div class="post-details-left">
    Posted on <strong><?php the_date(); ?></strong> by <span 
class="author"><?php the_author(); ?></span> under <span 
class="author"><?php the_category(', '); ?></span>
    </div>
    <div class="post-details-right">
    <?php edit_post_link('Edit', '<span class="comment-
count">&nbsp;&nbsp;' , '</span>'); ?><span class="comment-count"><?php 
comments_popup_link('Leave a comment', '1 Comment', '% Comments'); 
?></span>
    </div>
  </div>

  <?php if ( is_archive() || is_search() ) : // Only display excerpts 
for archives and search. ?>
      <?php the_excerpt(); ?>
  <?php else : ?>
      <?php the_content('Read More'); ?>
  <?php endif; ?>

</div><!-- post -->
</div>
<div class="spacer"></div>
<?php endwhile; ?>
<div class="spacer"></div>
<?php get_footer(); ?>

与 index.php 文件类似，但 WordPress 只会检索一篇文章。由于已经有了显示文章的 Ext JS 代码，所以不需要再做其他操作。

通过以上步骤，就可以使用 Ext JS 构建一个完整的 WordPress 主题。整个构建过程的流程图如下：

graph LR
    A[开始] --> B[构建头部]
    B --> C[创建 Ext JS 代码]
    C --> D[构建底部]
    D --> E[构建主页]
    E --> F[构建侧边栏]
    F --> G[构建单篇文章页面]
    G --> H[结束]

通过以上详细的步骤和代码，你可以逐步构建出一个功能丰富的 WordPress 主题，包含头部、底部、侧边栏、文章列表和单篇文章页面等。在构建过程中，要注意各个文件之间的关联和代码的正确使用，以确保主题能够正常显示和运行。

使用 Ext JS 构建 WordPress 主题（续）

7. 代码分析与总结

在构建这个 WordPress 主题的过程中，我们结合了 PHP 和 Ext JS 两种技术，通过合理的布局和代码实现，将各个部分有机地结合在一起。下面对关键部分进行详细分析：

7.1 PHP 部分

header.php ：主要负责引入必要的 CSS 和 JavaScript 文件，设置页面标题，并构建头部的 HTML 结构。其中， bloginfo 函数起到了关键作用，它可以获取博客的各种信息，如博客名称、主题目录、样式表 URL 等。通过这个函数，我们可以动态地加载所需的资源文件。
footer.php ：包含底部的 HTML 内容，同时调用了 wp_footer 函数和 get_sidebar 函数。 wp_footer 函数用于触发 WordPress 的底部操作，确保一些插件的正常运行； get_sidebar 函数则用于引入侧边栏的内容。
index.php ：作为主页，它不仅调用了头部和底部，还使用 while ( have_posts() ) 循环来显示博客文章列表。这个循环会遍历所有的文章，并将它们的标题、日期、作者、分类等信息显示出来。
single.php ：与 index.php 类似，但它只显示单篇文章的内容。通过 WordPress 的查询机制，它会自动获取当前文章的信息并显示出来。

7.2 Ext JS 部分

视口（Viewport） ：使用边框布局（Border Layout）将页面划分为北部、南部、东部和中心四个区域。在不同的区域中，我们可以放置不同的组件，如头部、底部、侧边栏和文章内容。
导航栏（Toolbar） ：通过 Ext.ComponentQuery 查询到 navToolbar ，并将导航链接动态添加到工具栏中。这样，用户可以方便地浏览博客的不同页面。
文章显示 ：在中心区域，我们创建了一个容器（Container），并为每篇文章创建一个面板（Panel）。通过 Ext.Array.each 循环，我们将文章的标题和内容添加到面板中，实现了文章的动态显示。

8. 常见问题及解决方案

在构建过程中，可能会遇到一些常见的问题，下面为你提供相应的解决方案：

问题	解决方案
资源文件加载失败	检查 `bloginfo` 函数返回的路径是否正确，确保 Ext JS SDK 和自定义的 `app.js` 文件存在于正确的目录中。
导航链接无法显示	检查 `wp_nav_menu` 函数的参数是否正确，确保菜单名称、菜单类名等设置无误。
文章内容显示异常	检查 `while ( have_posts() )` 循环是否正常工作，确保文章的标题、日期、作者等信息能够正确获取。

9. 优化建议

为了提高主题的性能和用户体验，我们可以对代码进行一些优化：

资源文件压缩 ：对 CSS 和 JavaScript 文件进行压缩，减少文件大小，提高加载速度。可以使用一些在线工具或构建工具来实现文件压缩。
缓存机制 ：使用 WordPress 的缓存插件，如 WP Super Cache，减少服务器的负载，提高页面的响应速度。
响应式设计 ：使用媒体查询和弹性布局，使主题在不同的设备上都能有良好的显示效果。

10. 总结与展望

通过本文的介绍，我们详细了解了如何使用 Ext JS 构建一个完整的 WordPress 主题。从头部、底部的构建，到侧边栏、文章列表和单篇文章页面的实现，我们逐步完成了主题的各个部分。在这个过程中，我们结合了 PHP 和 Ext JS 的优势，实现了动态内容的显示和交互。

未来，我们可以进一步扩展这个主题的功能，如添加评论系统、搜索功能、社交媒体分享等。同时，我们也可以优化主题的性能，提高用户体验，使主题更加完善。

总之，使用 Ext JS 构建 WordPress 主题是一个有趣且富有挑战性的过程。通过不断地学习和实践，我们可以掌握更多的技术和方法，构建出更加优秀的主题。

以下是一个简单的表格，总结了各个文件的主要功能：
| 文件名称 | 主要功能 |
| ---- | ---- |
| header.php | 引入资源文件，设置页面标题，构建头部 HTML 结构 |
| footer.php | 包含底部内容，调用 wp_footer 和 get_sidebar 函数 |
| index.php | 显示博客文章列表 |
| single.php | 显示单篇文章内容 |
| sidebar.php | 包含侧边栏的各种小部件 |
| app.js | 创建 Ext JS 组件，实现页面布局和交互 |

通过以上的总结和分析，希望你对使用 Ext JS 构建 WordPress 主题有了更深入的理解。在实际应用中，你可以根据自己的需求对代码进行修改和扩展，打造出属于自己的个性化主题。

graph LR
    A[PHP 文件] --> B[header.php]
    A --> C[footer.php]
    A --> D[index.php]
    A --> E[single.php]
    A --> F[sidebar.php]
    G[Ext JS 文件] --> H[app.js]
    I[博客主题] --> A
    I --> G

这个流程图展示了 PHP 文件、Ext JS 文件与博客主题之间的关系，帮助你更好地理解整个构建过程。