在 wordpress 自定义主题索引上显示页面链接答案

【问题标题】：display pages links on wordpress custom theme index在 wordpress 自定义主题索引上显示页面链接
【发布时间】：2019-04-12 21:36:02
【问题描述】：

我正在从头开始开发我的第一个 wordpress 主题。我需要一些帮助来解决与WP_Query 类和导航菜单相关的两个问题。我想在我的主题索引上显示页面标题和特色图片。我已经阅读了文档，最好的方法是在进行自定义查询后使用标准的 wordpress 循环。我正在使用此代码获取已发布的页面，但它不起作用，控制台总是记录我这个错误``。现在我正在显示已发布的文章，但我需要将其更改为页面。这是查询的代码

<?php get_header(); ?>

<?php
$args = array('post_type'=>'page');
$pages = new WP_Query($args);
//var_dump($pages);
?>
<div class="container-fluid" id="wrapper">

<div class="row justify-content-center" id="home-cover">
  <div class="col-sm-12 col-md-6 col-lg-6 text-center" id="donate-button-wrapper">
    <button class="btn btn-link btn-donate">Call to action</button>
  </div>
</div>
<!-- ultimare -->
<div class="row">
  <?php if($pages->have_posts()) : while ($pages->have_posts()) : $pages->the_post(); ?>
      <div class="col-sm-12 col-md-3 col-lg-3" id="home-cols">

        <a href="<?php the_permalink(); ?>" class="home-card-link">
      <div class="card" id="post-link">
        <div class="home-img-wrapper">
        <?php the_post_thumbnail('post-thumbnail', array('class'=>'card-img-top home') ); ?>
        </div>
        <div class="card-body">
          <h4 id="home-card-link-title"><?php the_title(); ?></h4>
        </div>
      </div>

        </a>

      </div>
    <?php endwhile; ?>
  <?php endif;  wp_reset_postdata(); ?>
</div>

<?php get_footer(); ?>

对于menù问题，我使用bootstrap 4来设置我的主题。我需要了解如何在wordpress上注册我的菜单，我想在PC上使用bootstrap的标准导航栏，并使用offcanvas菜单当网站从移动设备显示时，请键入。这是我用来显示菜单的代码：

<script>
(function($){

$(document).on('click', '.navbar-brand',function(event){
  event.preventDefault();
  if($('#menu-row').hasClass('menuOpen')){
    $('#menu-row').removeClass('menuOpen')
    .addClass('menuClosed');
    $('#nav-icon').removeClass('fas fa-times fa-2x')
    .addClass('fas fa-bars fa-2x');
  }
  else{
    $('#menu-row').removeClass('menuClosed')
    .addClass('menuOpen');
    $('#nav-icon').removeClass('fas fa-bars fa-2x')
    .addClass('fas fa-times fa-2x');
  }
});
}(jQuery));
</script>

<style>
.row.justify-content-center.menuClosed{
  transform: translateX(-100%);
  transition: all 300ms;
}
.row.justify-content-center.menuOpen{
  transition: all 300ms;
  transform: translateX(0%);
}
</style>

<?php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="profile" href="http://gmpg.org/xfn/11">

  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<nav class="navbar navbar-expand-md fixed-top" id="bs-nav">
  <a class="navbar-brand" href="#"><i class="fas fa-bars fa-2x" id="nav-icon"></i></a>
</nav>

  <div class="container-fluid" id="menu-wrapper">
    <div class="row justify-content-center menuClosed" id="menu-row">
      <div class="col-sm-12 col-lg-12 col-md-12">
        <?php wp_nav_menu( array( 'theme_location'=>'header-menu', 'menu_class'=>'nav mx-auto') ); ?>
      </div>
    </div>
  </div>

我已经尝试传递 array() 的参数，如 wordpress 文档中所述，但它会以错误的方式应用这些类，我无法设置 ul 和 li 的样式来分配引导类。

【问题讨论】：

标签： php html css wordpress bootstrap-4

【解决方案1】：

对于菜单问题：

我知道如何访问 wp_nav_menu 中的 li 元素的方法是遍历所有菜单项。最好的方法是使用Walker_Nav_Menu class 将此代码放入您的 functions.php 文件中：

  class Your_Custom_Walker extends Walker_Nav_Menu{


   function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {

   // You can access all the item properties this way
  // you can view them all by calling print_r($item)

    $title = $item->title;
    $permalink = $item->url;
    $name = $item->post_name;

    $li_classes = 'class1 class2 class3 ect.. '; // You can put all the classes you want on the li element here

    $output .= "<li class= '".$li_classes."'>";

    $output .= '<a href="' . $permalink . '">';

    $output .= $title;

    $output .= '</a>';

 }

}

然后在要显示菜单的文件中，创建 My_Custom_Walker 类的实例：

wp_nav_menu(array(
                'menu' => 'YOUR MENU NAME',
                'theme_location' => 'primary',
                'menu_class'     => 'nav ', // Here you set the classnames of the ul element
                // Create the instance of the Walker and the will run the start_el function 
                'walker' => new My_Custom_Walker()
             ) );

【讨论】：

【解决方案2】：

尝试为 wp_query 实例使用另一个名称。埃克斯：

  $page_query = new WP_Query( array( 'post_type' => 'page' ) );

这对我有用。我认为 $pages 是一个全局名称。希望这对你有用。

【讨论】：