如何在WordPress中使用HTML编辑首页及其他页面源文件，以及在Sinatra主题下为导航栏添加HTML元素并设置CSS样式

1. 如何在WordPress中用HTML编辑首页、索引页及其他页面的源文件？ #

首先得区分「页面内容的HTML」和「整个页面结构的源码」，两者的编辑方式不一样：

• 静态页面（首页/自定义页面）的内容编辑：
  如果你的首页是静态页面，直接登录WordPress后台，进入「页面」→「所有页面」，找到对应的页面后点击编辑。在编辑器顶部切换到「代码编辑器」（别用可视化编辑器），就能直接修改这个页面的HTML内容了。不过这只能改页面的主体内容，像头部导航、底部版权这类全局部分不在这个范围内。

• 整个页面结构的源码编辑：
  要是想改页面的完整结构（比如首页的header布局、博客索引页的文章循环），就得编辑主题的模板文件：

  • 首页：如果是静态首页，对应模板一般是front-page.php；如果是展示博客文章的首页，就是index.php或者home.php。
  • 其他页面：通用页面模板是page.php，如果有自定义模板，编辑页面时可以在「页面属性」里看到并选择对应的模板文件。
  • 操作路径：后台「外观」→「主题文件编辑器」里就能找到这些文件；或者用FTP工具连到服务器，去wp-content/themes/你的主题名称目录下直接编辑。划重点：一定要先建子主题再改！直接改父主题的话，主题一更新你所有的修改都会丢失。

2. Sinatra主题下导航栏添加HTML元素与样式的问题 #

先给你明确答案：WordPress的主题源文件当然可以编辑，但同样推荐用子主题或者自定义功能来做，避免主题更新覆盖你的修改。下面给你几种可行的方案：

方案一：直接编辑主题源码（适合有基础的开发者） #

Sinatra主题的导航栏一般在header.php里，或者可能有专门的navigation.php、menu.php文件。你可以通过后台「外观」→「主题文件编辑器」找到这些文件，或者用FTP去wp-content/themes/sinatra目录下查找。

找到输出菜单的代码（通常是wp_nav_menu()函数的调用），你可以在这个函数的前后直接加自定义HTML元素，比如：

// 假设header.php里的菜单代码是这样的
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
) );

// 在菜单后面加个自定义按钮
echo '<div class="custom-menu-btn"><a href="/contact">联系我们</a></div>';

如果想修改单个菜单项的HTML结构，还可以自定义菜单的walker类，不过这个稍微复杂点，适合进阶需求。

方案二：不碰主题源码，用钩子和自定义CSS（更安全） #

不想动主题文件的话，用WordPress的钩子功能完全可以实现：

• 添加自定义菜单元素：把子主题functions.php里加上这段代码（没有子主题就先创建一个）：

  add_filter( 'wp_nav_menu_items', 'sinatra_add_custom_menu_item', 10, 2 );
  function sinatra_add_custom_menu_item( $items, $args ) {
      // 只给主菜单加元素，theme_location的值要对应Sinatra主题的主菜单位置，一般是'primary'
      if ( $args->theme_location == 'primary' ) {
          // 在菜单末尾加一个自定义菜单项
          $items .= '<li class="custom-nav-item"><a href="/about">关于我们</a></li>';
      }
      return $items;
  }
  

• 设置CSS样式：加完HTML元素后，去后台「外观」→「自定义」→「额外CSS」里写样式，比如：

  .custom-nav-item {
      margin-left: 20px;
      background: #2c3e50;
      border-radius: 4px;
  }
  .custom-nav-item a {
      color: white !important;
      padding: 8px 16px;
  }
  

找不到源文件的解决办法 #

如果后台主题编辑器里看不到某些文件，大概率是主题限制了编辑权限，或者你需要用FTP工具直接访问服务器上的主题目录wp-content/themes/sinatra，那里能看到所有的主题文件。

内容的提问来源于stack exchange，提问作者Elia