自定义WordPress导航菜单最后一个项目 - 两个社交图标

问题描述 投票：-1回答：3

我需要在最后一个li项目中创建包含两个社交图标的WordPress自定义导航菜单。

document.addEventListener('DOMContentLoaded', function() {

  // Toggle

  const btn = document.querySelector('#btnToggle');
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    document.body.classList.toggle('nav-show');
    this.classList.toggle('btn-toggle--toggled');
  });


  // Highlight current page active menu item.

  const selector = '.nav__link';
  const elems = Array.from(document.querySelectorAll(selector));
  const navigation = document.querySelector('nav');

  function makeActive(evt) {
    const target = evt.target;

    if (!target || !target.matches(selector)) {
      return;
    }

    elems.forEach(elem => elem.classList.remove('active'));
    evt.target.classList.add('active');
  };

  navigation.addEventListener('mousedown', makeActive);

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.social__link {
  display: block;
}

svg {
  width: 100%;
  display: block;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.logo__container {
  padding: .3125rem .3125rem .625rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo__heart {
  flex-basis: 27%;
}

.hgroup {
  padding-left: .625rem;
}

.headline__light {
  display: none;
}

.headline {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0;
}

.navigation__container {
  align-items: center;
}

.header__item {
  display: flex;
}

.btn-toggle button {
  background: none;
  border: 0;
}

.btn-toggle {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 9px;
  position: absolute;
  top: 24px;
  right: 20px;
  background: none;
}

.btn-toggle .line {
  background: #888;
  border-radius: 10px;
  display: block;
  position: absolute;
  height: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 80%;
}

.btn-toggle .line:nth-child(1) {
  margin-top: -6px;
}

.btn-toggle .line:nth-child(3) {
  margin-top: 6px;
}

.btn-toggle--toggled .line:nth-child(2) {
  opacity: 0;
}

.btn-toggle--toggled .line:nth-child(1) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-toggle--toggled .line:nth-child(3) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav {
  background: #F2EFE8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  max-height: 0;
  overflow: hidden;
  transition: 0.5s max-height;
}

.nav-show .nav {
  max-height: 700px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  background: #F2EFE8;
  border-top: 1px solid #DDD;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.nav__item {
  flex-basis: 100%;
  text-transform: uppercase;
  font-size: .875rem;
  text-align: center;
  border-bottom: 1px solid #888;
  letter-spacing: .0625rem;
}

.nav__link {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: #222;
  padding: .625rem;
}

.nav__link:hover {
  background: #c2def7;
}

.nav__link.active {
  background: #abd4f8;
}

.icon__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav__item.social__icon {
  padding: .625rem;
}

.icon {
  width: 10%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  .nav__list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nav__item {
    width: 50%;
    flex-basis: 50%;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:nth-of-type(2) {
    order: 3;
  }
  .nav__item:nth-of-type(3) {
    order: 5;
  }
  .nav__item:nth-of-type(4) {
    order: 7;
  }
  .nav__item:nth-of-type(5) {
    order: 9;
  }
  .nav__item:nth-of-type(6) {
    order: 2;
  }
  .nav__item:nth-of-type(7) {
    order: 4;
  }
  .nav__item:nth-of-type(8) {
    order: 6;
  }
  .nav__item:nth-of-type(9) {
    order: 8;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    padding: .3125rem 0;
    border-bottom: 1px solid #888;
  }
  .icon {
    width: 9%;
  }
}

@media only screen and (min-width: 768px) {
  .logo__heart {
    flex-basis: 25%;
  }
  .hgroup {
    flex-basis: 71%;
  }
  .headline__light {
    display: block;
    font-size: .875rem;
    text-transform: none;
  }
  .nav__list {
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .nav__item {
    width: 33.33%;
    flex-basis: 33.33%;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:nth-of-type(2) {
    order: 4;
  }
  .nav__item:nth-of-type(3) {
    order: 7;
  }
  .nav__item:nth-of-type(4) {
    order: 2;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 8;
  }
  .nav__item:nth-of-type(7) {
    order: 3;
  }
  .nav__item:nth-of-type(8) {
    order: 6;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    padding: .625rem;
    flex-basis: 100%;
  }
  .icon {
    width: 4%;
  }
}

@media only screen and (min-width: 1024px) {
  .logo {
    width: 100%;
  }
  .logo__heart {
    flex-basis: 30%;
  }
  .hgroup {
    flex-basis: 100%;
    padding: 0;
  }
  .unboxing__trick {
    background-color: #F2EFE8;
    width: 100vw;
    position: relative;
    margin: 0 calc(-50vw + 50%);
    padding: 0 calc(50vw - 50%);
  }
  .btn-toggle {
    display: none;
  }
  .nav {
    max-height: 100%;
    transition: none;
    transition-duration: 0s;
    display: flex;
    flex-direction: row;
  }
  .nav__list {
    flex-direction: row;
    flex-wrap: nowrap;
    border-top: none;
    padding: .625rem 0;
  }
  .nav__item {
    flex-basis: auto;
    width: auto;
    flex-grow: 1;
    flex: 1 1 auto;
    position: relative;
    border-bottom: none;
  }
  .nav__item:after {
    content: '';
    position: absolute;
    width: 1px;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .20) 50%, hsla(0, 0%, 0%, 0) 100%);
  }
  .nav__item:last-of-type {
    border-right: 0;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:first-child::after {
    display: none;
  }
  .nav__item:nth-of-type(2) {
    order: 2;
  }
  .nav__item:nth-of-type(3) {
    order: 3;
  }
  .nav__item:nth-of-type(4) {
    order: 4;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 6;
  }
  .nav__item:nth-of-type(7) {
    order: 7;
  }
  .nav__item:nth-of-type(8) {
    order: 8;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    flex: 1 1 8%;
    padding: .3125rem 0;
    border-bottom: none;
  }
  .nav__link:hover {
    background: none;
    color: #b8795a;
  }
  .nav__link.active {
    background: none;
    color: #b8795a;
  }
  .icon {
    width: 25px;
  }
}

@supports (position: sticky) {
  .header {
    position: sticky;
    top: 0;
  }
}
<!doctype html>
<html lang="pl">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="style.css">
  <script src="app.js"></script>
</head>

<body>
  <header class="header">
    <section class="container">
      <div class="header__container">
        <div class="logo__container header__item">
          <div class="logo">
            <div class="logo__heart">
              <a href="#"><img class="img__logo" src="http://placehold.it/169x160" alt="" title=""></a>
            </div>
            <div class="hgroup">
              <h1 class="headline__bold headline">Czysta świadomość</h1>
              <h2 class="headline__light headline">
                ... stan bycia poza umysłem, wolny od goniących myśli, wszelkich uwarukowań, pobudek ego.<br> Czysta Świadomość to prawdziwe JA... to Światło i Miłość
              </h2>
            </div>
          </div>
        </div>

        <nav class="navigation__container">
          <button class="btn-toggle" id="btnToggle" aria-label="Open / Close Menu">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </button>

          <div class="unboxing__trick">
            <div class="nav">
              <ul class="nav__list">
                <li class="nav__item">
                  <a class="nav__link active" href="#">Strona Główna</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Ja jestem</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Kalendarz</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Warsztaty</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Wykłady</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Artykuły</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Audio</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Youtube</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Kontakt</a>
                </li>
                <li class="nav__item social__icon">
                  <figure class="icon__container">
                    <div class="icon">
                      <a class="social__link social__link--fb" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297.5 123.5 595 595" enable-background="new -297.5 123.5 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                <rect x="-64.47" y="206.101" fill="#FFFFFF" width="276.871" height="512.399"/>
                                                <path id="Facebook" fill="#4460A0" d="M20.309,718.5H-264.66c-18.143,0-32.84-14.707-32.84-32.84V156.342
	                                               c0-18.144,14.698-32.842,32.84-32.842h529.324c18.135,0,32.836,14.698,32.836,32.842V685.66c0,18.137-14.701,32.84-32.836,32.84
	                                               H113.042V488.082h77.34l11.581-89.799h-88.921v-57.328c0-26,7.218-43.713,44.5-43.713l47.548-0.02v-80.316
	                                               c-8.223-1.092-36.449-3.538-69.289-3.538c-68.561,0-115.496,41.851-115.496,118.698v66.222H-57.23v89.798H20.31V718.5H20.309z"/>
                                            </svg>
                      </a>
                    </div>
                    <div class="icon">
                      <a class="social__link social__link--youtube" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 36.305 595 595" enable-background="new 0 36.305 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                <polygon fill="#FFFFFF" points="214.04,443.136 214.04,214.49 432.938,328.812 "/>
                                                    <path id="Youtube" fill="#CE1312" d="M589.05,214.115c0,0-5.819-41.248-23.65-59.408c-22.629-23.849-47.991-23.959-59.611-25.343
                                                        c-83.265-6.06-208.158-6.06-208.158-6.06h-0.261c0,0-124.895,0-208.157,6.06c-11.641,1.384-36.984,1.495-59.63,25.343
                                                        C11.75,172.873,5.948,214.115,5.948,214.115S0,262.565,0,310.993v45.417c0,48.445,5.949,96.875,5.949,96.875
                                                        s5.802,41.247,23.633,59.407c22.647,23.851,52.379,23.102,65.617,25.591c47.6,4.602,202.301,6.021,202.301,6.021
                                                        s125.024-0.185,208.288-6.246c11.621-1.4,36.983-1.514,59.611-25.36c17.831-18.166,23.652-59.408,23.652-59.408
                                                        S595,404.859,595,356.41v-45.417C595,262.565,589.05,214.115,589.05,214.115z M236.066,411.443l-0.019-168.18l160.762,84.38
                                                        L236.066,411.443z"/>
                                            </svg>
                      </a>
                    </div>
                  </figure>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </section>
  </header>
</body>

</html>
wordpress
3个回答
2
投票

我不能评论Marco的答案，因为我没有足够的声誉，所以我创建了一个新答案......

Marco的代码只需要一个小的调整，然后它应该工作：社交图标标记需要添加到$items，最后，$items需要由过滤器函数返回。

function add_last_nav_item( $items ) {
    $items .= sprintf(
        '<li class="nav__item social__icon">
   <figure class="icon__container">
     <div class="icon">
      <a href="51$s" target="_blank" class="social__link"><img src="%2$s/images/icon__facebook.svg"></a>
     </div>
     <div class="icon">
       <a href="%3$s" target="_blank" class="social__link"><img src="%2$s/images/icon__youtube.svg"></a> .
     </div>
   </figure>
  </li>',
        'https://www.facebook.com/Czysta-%C5%9Awiadomo%C5%9B%C4%87-%C5%9Awiat%C5%82o-i-Mi%C5%82o%C5%9B%C4%87pl-811435542275919/',
        get_template_directory_uri(),
        'https://www.youtube.com/channel/UCxxKwAW7JE6eCx3OjNcO6Yw/'
    );

    return $items;
}

add_filter( 'wp_nav_menu_items', 'add_last_nav_item' );

Update for adding classes

要将类添加到导航项的li和a元素，可以使用以下代码段：

/**
 * Add classes to li and a elements of the nav menus.
 *
 * @param string $items HTML of menu items.
 *
 * @return string
 */
function themeslug_add_menu_item_classes( $items ) {
    // Disable libxml errors.
    libxml_use_internal_errors( true );

    // Create new DOMDocument object.
    $dom = new DOMDocument();

    // Load the HTML.
    // Trick with <?xml endocing="utf-8" loadHTML() method of https://github.com/ivopetkov/html5-dom-document-php
    $dom->loadHTML( '<?xml encoding="utf-8" ?>' . $items, 0 | LIBXML_NOENT );

    $xpath = new DOMXPath( $dom );

    // Get all nodes.
    $nodes = $xpath->query( '//*' );

    // Loop them.
    foreach ( $nodes as $node ) {
        // Check if we have an li element.
        if ( 'li' === $node->tagName ) {
            // Get existing classes from element and add our custom class.
            $classes = $node->getAttribute( 'class' ) . ' my-custom-list-item-class';
            // Set the custom class.
            $node->setAttribute( 'class', $classes );
        } // End if().

        // Check if the node is an a element.
        if ( 'a' === $node->tagName ) {
            // Get existing classes from element and add our custom class.
            $classes = $node->getAttribute( 'class' ) . ' my-custom-a-element-class';
            // Set the custom class.
            $node->setAttribute( 'class', $classes );
        } // End if().
    } // End foreach().

    // Save the dom.
    $items = themeslug_save_html( $dom );

    // Return the items.
    return $items;
}

add_filter( 'wp_nav_menu_items', 'themeslug_add_menu_item_classes' );

/**
 * Enhanced variation of DOMDocument->saveHTML().
 *
 * Fix for cyrillic from https://stackoverflow.com/a/47454019/7774451.
 * Replacement of doctype, html, and body from archon810\SmartDOMDocument.
 *
 * @param DOMDocument $dom DOMDocument object of the dom.
 *
 * @return string DOM or empty string.
 */
function themeslug_save_html( DOMDocument $dom ) {
    $xpath      = new DOMXPath( $dom );
    $first_item = $xpath->query( '/' )->item( 0 );

    return preg_replace(
        array(
            '/^\<\!DOCTYPE.*?<html><body>/si',
            '!</body></html>$!si',
        ),
        '',
        $dom->saveHTML( $first_item )
    );
}

它使用DOMDocument来解析导航项的HTML和DOMXPath以获取所有HTML节点。之后，节点循环并在循环内部检查元素类型，如果它是li或a元素，则添加一个类。

1
投票

你可以将此代码粘贴到functions.php上吗？ 它应该在wp_nav_menu（）的末尾添加li

function add_last_nav_item($items) { 
  ?>
  <li class="nav__item social__icon">                                                    
   <figure class="icon__container">                                                        
     <div class="icon">                                                            
      <a href="https://www.facebook.com/Czysta-%C5%9Awiadomo%C5%9B%C4%87-%C5%9Awiat%C5%82o-i-Mi%C5%82o%C5%9B%C4%87pl-811435542275919/" target="_blank" class="social__link"><img src="<?php echo get_template_directory_uri(); ?>/images/icon__facebook.svg"></a>                                                     
     </div>
     <div class="icon">                                                            
       <a href="https://www.youtube.com/channel/UCxxKwAW7JE6eCx3OjNcO6Yw/" target="_blank" class="social__link"><img src="<?php echo get_template_directory_uri(); ?>/images/icon__youtube.svg"></a> .                                                          
     </div>
   </figure>
  </li>
  <?php
}

add_filter('wp_nav_menu_items','add_last_nav_item');
0
投票

您可以扩展WordPress Walker类来构建自定义菜单。

看看codex文档。

https://codex.wordpress.org/Class_Reference/Walker

您需要在其中应用所需的逻辑。不要使用jQuery或frontend脚本来做到这一点。菜单可以通过Walker完全自定义。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.