获取父ID的子页面并显示自定义图像字段以及WordPress中页面的链接 [英] get child pages of parent ID and display custom image field with link to page in WordPress

问题描述

我需要获取子页面列表，但是我需要排除第一个孩子。我还需要显示一个名为 page_icon的自定义图片字段，并为每个图片添加网址和页面标题。这将作为子菜单，将显示在每个子页面上。每个菜单项都需要将当前类附加到a标签。我尝试了许多不同的方法，但由于我的技能水平充其量只是初学者，所以运气不佳。

I need to get list of child pages, but i need to exclude the first child. I also need to display a custom image field called'page_icon' with url and page title for each. This will act as a sub menu whic will be displayed on each child page. Each menu item needs to have the current class attached to the a tag. i've tried a number of different methods and have had no luck as my skill level is beginner at best.

父ID为1064
，自定义字段称为 page_icon，它是使用ACF设置的

the parent ID is 1064 the custom field is called 'page_icon' which was set up using ACF

当前菜单被硬编码到编辑器中，并且html看起来像这样：-

the current menu is hard coded into the editor and the html looks like this: -

<div id="attachment_1306" style="width: 160px" class="wp-caption alignleft"><a class="icon on" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1306 size-thumbnail" title="Policy Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/docs-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Policy Manager</p></div>

 <div id="attachment_1297" style="width: 160px" class="wp-caption alignleft"><a class="icon" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1297 size-thumbnail" title="Risk Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/risk-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Risk Manager</p></div>

 <div id="attachment_1307" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Controls Manager" href="http://www.domain.co.uk/governance-risk-and-category/category/category/"><img class="wp-image-1307 size-thumbnail" title="Controls Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/controls-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Controls Manager</p></div>

 <div id="attachment_1301" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Incident Manager" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1301 size-thumbnail" title="Incident Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/incident-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Incident Manager</p></div>

 <div id="attachment_1289" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Workflow Manager" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1289 size-thumbnail" title="Workflow Manager" src="http://www.corestream.co.uk/wp-content/uploads/2013/05/workflow-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Workflow Manager</p></div>

但这在更新页面图标方面不是用户友好的，因为您必须复制并粘贴此内容进入每个子页面。

but this is not user friendly in terms of updating the page icons as you have to copy and paste this into each child page.

请有人帮我吗？

推荐答案

在主题目录（/wp-content/themes/your-theme/solutions_menu.php）中创建一个名为solutions_menu.php的文件。该文件将包含菜单，并将包含在您的页面中。

Create a file called solutions_menu.php in your theme's directory (/wp-content/themes/your-theme/solutions_menu.php). This file will contain the menu, and will be included in to your pages.

我已替换for循环和foreach循环。然后，我为发布类型==页面添加了另一个ACF字段，以控制是否在菜单中显示页面。这是一个简单的布尔（真/假）字段，名称为 appear_in_solutions_menu。我不确定这是否是解决问题的最佳方法，但至少可以正常工作。

I replaced the for-loop with a foreach-loop. Then I added another ACF field for when post type == page to control whether to show the page in the menu or not. It's a simple boolean (true/false) field with the name "appear_in_solutions_menu". I'm not sure this is the best way to solve it but it's working at least.

以下是使用以下代码的有效示例：http://japmag.net/24909031/?page_id=6

Here's a working example using the code below: http://japmag.net/24909031/?page_id=6

<?php

# Parent ID
$parent_id = 1064;

# Arguments for the query
$args = array(
    'post_parent' => $parent_id,
    'post_type'   => 'page', 
    'posts_per_page' => -1,
    'post_status' => 'publish' 
    ); 

# The parent's children
$kids = get_children( $args );

# Current pages ID
$page_ID = get_the_ID();

# Start iterating from 1, to skip first child
foreach( $kids as $kid ) {

    # Set variables
    $id = $kid->ID;
    $url = get_permalink( $id );
    $page_icon_array = get_field( 'page_icon', $id );
    $page_icon = $page_icon_array[ 'url' ];
    $title = $kid->post_title;
    $show = get_field( 'appear_in_solutions_menu' , $id );

    # Make sure the page shoul be in the menu
    if( $show ) {

        # If the current page ID matches the ID of the child, then $current will contain " on", which will be used to apply the class "on" to the anchor-element
        $current = ( $page_ID == $id ) ? " on" : "";

        # Echo out the menu ?>

        <div style="width: 160px" class="wp-caption alignleft">

            <a class="icon<?php echo $current?>" href="<?php echo $url?>">

                <img class="size-thumbnail" title="<?php echo $title ?>" src="<?php echo $page_icon; ?>" alt="" width="150" height="150" />

            </a>

            <p class="wp-caption-text"><?php echo $title ?></p>

        </div>

    <?php 

    }

}

?>

现在用

<?php get_template_part( 'solutions_menu' ); ?>

这将在您的页面中包含菜单，并有望以正确的数据动态填充自身。因此，如果需要更改菜单，只需更改solutions_menu.php，所有包含该菜单的页面都会受到影响。我希望我正确理解了这个问题。我现在正在工作，所以我还无法测试代码。

This will include the menu in to your pages, and should hopefully dynamically populate itself with the correct data. So if you need to make changes to the menu, just change solutions_menu.php and all the pages that include it will be affected. I hope I understood the problem correctly. I'm at work right now so I haven't been able to test the code yet.

这篇关于获取父ID的子页面并显示自定义图像字段以及WordPress中页面的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！