在 wordpress 自定义主题索引上显示页面链接
Posted
技术标签:
【中文标题】在 wordpress 自定义主题索引上显示页面链接【英文标题】：display pages links on wordpress custom theme index 【发布时间】：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 的样式来分配引导类。
【问题讨论】：
【参考方案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 是一个全局名称。 希望这对你有用。
【讨论】：
以上是关于在 wordpress 自定义主题索引上显示页面链接的主要内容，如果未能解决你的问题，请参考以下文章
WordPress：如何使用 $wp_query 按类别过滤帖子？