header.php |更改搜索位置 [英] header.php | Change position of search

问题描述

如何让搜索进入 storefront_primary_navigation 和 storefront_header_cart 之间的第二行？使用下面的PHP代码。如果我在CSS中进行这些更改，它看起来丑陋的移动设备。那么这可以在PHP中完成吗？如果是，我应该在哪个文件中进行更改和什么更改？

现在我在标题中有两行： >
First Line：Logo | secondary_navigation | product_search

第二行：primary_navigation | header_cart

现在标题如下：

PHP：

 < header id =mastheadclass =site-header role =banner<？php if（get_header_image（）！=''）{echo'style =background-image：url（'。esc_url（get_header_image（））。 }？>> 
< div class =col-full> 
 
<？php 
 / ** 
 * @hooked storefront_skip_links  -  0 
 * @hooked storefront_social_icons  -  5 
 * @hooked storefront_site_branding  -  10 
 * @hooked storefront_secondary_navigation  -  15 
 * @hooked storefront_product_search  -  20 
 * @hooked storefront_primary_navigation  -  25 
 * @hooked storefront_header_cart  -  30 
 * / 
 do_action （'storefront_header'）; ？> 
 
< / div> 
  

需要输出：
secondary_navigation

第二行：primary_navigation | product_search | header_cart

Manoj变更： / strong>

解决方案

answer here：

How can i make the search come in between storefront_primary_navigation and storefront_header_cart on the 2nd line of header ?? using the below PHP code. if i make these changes in CSS, it looks ugly on the mobile devices. So can this be done in PHP ? If Yes, in which file should i make the changes and what are the changes ?

Right now i have two lines in header:
First Line: Logo | secondary_navigation | product_search
Second Line: primary_navigation | header_cart

Now the header looks like:

PHP:

<header id="masthead" class="site-header" role="banner" <?php if ( get_header_image() != '' ) { echo 'style="background-image: url(' . esc_url( get_header_image() ) . ');"'; } ?>>
        <div class="col-full">

            <?php
            /**
             * @hooked storefront_skip_links - 0
             * @hooked storefront_social_icons - 5
             * @hooked storefront_site_branding - 10
             * @hooked storefront_secondary_navigation - 15
             * @hooked storefront_product_search - 20
             * @hooked storefront_primary_navigation - 25
             * @hooked storefront_header_cart - 30
             */
            do_action( 'storefront_header' ); ?>

        </div>

Output needed: First Line: Logo | secondary_navigation
Second Line: primary_navigation | product_search | header_cart

Manoj Changes:

解决方案

This is similar to question/answer here: Sample product, Change location of price and glad you commented on the answer there ;)

PHP Edit:

In the below code, you are overwriting the Storefront hook inclusion/priority order. So the storefront_product_search will be included after storefront_primary_navigation which has a priority value of 25.

Include the following code in functions.php.

remove_action( 'storefront_header', 'storefront_product_search', 20 );

add_action( 'storefront_header', 'storefront_product_search', 26 );

CSS Edit:

.woocommerce-active .site-header .main-navigation {
  width: 58.913%; /* Changed to occupy the Search in same line */
}

.site-search:nth-of-type(1) {
   display: none; 
}

The second CSS rule is a hack to remove the first occurrence of the Search bar, it is not a standard solution. Since I don't have access to your PHP code, it is hard to predict the cause of the two search bar problem. There might be other actions interfering with the hook and undoing the remove_action PHP code or the priority was changed elsewhere.

Output:

这篇关于header.php |更改搜索位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！