当用户在某个页面上时如何动态加宽导航栏

Question

我正在开发一个使用名为 LearnDash 的 Wordpress 插件的项目。在这个插件中创建了一个导航栏，其中包含指向某些课程的链接。这些课程一直到第 15 课。

现在我遇到的问题是第 14 课和第 15 课从第 1 课 - 第 13 课下方的单独一行开始，该行位于此导航栏之外。当用户在这个特定页面上时，如何让这个导航栏动态变宽？

有什么想法吗？提前致谢。

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage WP_Forge
 * @since WP-Forge 5.5.0.1
 */

namespace hmba;
include 'page-templates/HMBA_Funcs.php';

/* catch errors and report if in local enviorment. */
if (isLocalhost()) {
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
}

function getLessonNav($pillars, $pillarCurrent, $lessonCurrent) {
    foreach ($pillars as $key => $pillar) {
        if (strpos($pillar['url'], $pillarCurrent) && array_key_exists('lessons', $pillar)) {
            return $pillar['lessons'];
        }
    }
}

// $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
// get the current url.
$current_path = $_SERVER[REQUEST_URI]; 
// $current_path = '/pillar1-lesson1/';
$current_path = getPath($current_path);
$pillarCurrent = $current_path['pillar'];
$lessonCurrent = $current_path['lesson'];

$lessons_nav = getLessonNav($pillars, $pillarCurrent, $lessonCurrent);

get_header(); ?>

    <style>
        .pillars .top-bar .name {
            background-color: #a54399;
            border-radius: 29px;
            margin: 0 5px;
            float: left;
        }
        .pillars .top-bar .name a {
            color: #ffffff !important;
            line-height: 17px !important;
            padding: 4px 15px !important;
        }
        .pillars .top-bar .name.current {
            background-color: #e99504;
        }
        .pillars .top-bar .name:hover {
            background-color: #e99504;
        }
        .entry-title {
            display: none;
        }
        section.content_wrap.row .top-bar {
            background-color: #ffffff;
        }
        .nav_wrap{
            background-color:#ffffff;
        }
        nav.lessons-bar {
            background-color: #7a7a7a;
            height: 35px;
        }
        .lessons-bar ul.title-area {
            list-style-type: none;
        }
        .lessons-bar li.name {
            float: left;
            padding: 5px 10px;
        }
        .lessons-bar li.name a{
            color: #ffffff !important;
        }
        .pillars .lessons-bar .name.current,
        .pillars .lessons-bar .name:hover       {
            background-color: #008c99;
        }

        /* learn dash style */
        .entry-content #learndash_lesson_topics_list > div {
            border: none;
            border-radius: 0;
            box-shadow: none;
            margin-bottom: 0;
        }
        .entry-content #learndash_lesson_topics_list .topic {
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;    
        }
        .learndash_topic_dots .topic-header {
            background-color: #ccf6f4;
            padding: 10px;
        }
        .entry-content .learndash .topic-notcompleted span {
            background: none;
            padding-left: 0px; 
            display: block;
            text-align: center;
            color: #444444;
            font-size: 22px;
        }

    </style>
        <div id="content" class="medium-12 large-12 columns pillars" role="main">

        <div class="nav_wrap row">

            <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">
                <ul class="title-area">
                <?php foreach ($pillars as $key => $tile) {  ?>
                    <li class="name <?php if (strpos($tile['url'], $pillarCurrent)) echo 'current' ?>">
                        <a href="<?php echo $tile['url'] ?>"><?php echo $tile['name'] ?></a>
                    </li>
                <?php } ?>
                </ul>
            </nav>   

            <nav class="lessons-bar" data-topbar data-options="mobile_show_parent_link: true">
                <ul class="title-area">
                <?php if ($lessons_nav) foreach ($lessons_nav as $key => $tile) {  ?>
                    <li class="name <?php if (strpos($tile['url'], $lessonCurrent)) echo 'current' ?>">
                        <a href="<?php echo $tile['url'] ?>"><?php echo $tile['name'] ?></a>
                    </li>
                <?php } ?>
                </ul>
            </nav>   

        </div>


            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( 'comments.php', true ); ?>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->

<?php get_footer(); ?>

我要编辑的是“课程栏”类的导航

Answer 1

我相信您可以通过在您的主容器页面上放置一个类来做到这一点，如果它当前位于某个页面上。有一个内置的 WP 功能，它可以告诉你当前所在的页面。

你可以试试这样：

<div id="page" class="hfeed site <?php if(is_page( 'lesson-1-page' )) echo 'wide-content';?>"> 

我相信可以在header.php 上找到起始元素，您可以尝试在那里进行编辑。

然后在你的css上添加这个：

.wide-content {
  width: "specify-your-wider-width-here";
}

资源：https://codex.wordpress.org/Function_Reference/is_page