Question

我正在从头开始研究我的第一个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(); ?>

对于菜单问题，我正在使用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>

我尝试按照wordpress文档中的描述传递array()参数，但是它将以一种奇怪的方式应用这些类，而我无法设置ul和{{1 }}来分配引导类。

Answer 1

尝试为wp_query实例使用其他名称。 eks：

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

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

Answer 2

有关菜单问题：

我知道如何访问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()
             ) );

在WordPress自定义主题索引上显示页面链接

2 个答案: