如何创建有效的Wordpress儿童主题

时间:2017-01-21 11:19:17

标签: php html css wordpress

我创建了一个子主题,但后来我想在主菜单中添加一些不改变的样式。

我在方向

创建一个文件夹aloshop-child
\public_html\wp-content\themes

在这个文件夹中,我创建了两个文件style.css和function.php 在function.php中我添加了代码:

<?php

function aloshop_child_enqueue_styles() {

$parent_style = 'aloshop';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'aloshop',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'aloshop_child_enqueue_styles' );

并在style.css中添加简单的信息

/*
Theme Name: Aloshop child theme
Author: Mantas Slau
Description: A child theme of the Aloshop default WordPress theme
Version: 1.1
Template:     aloshop
*/

接下来我在仪表板中激活了这个子主题。

所以我尝试检查这个子主题是否有效。我剪切了我的视觉作曲家自定义css代码(我暂时添加然后我开发了我的页面)并将其粘贴到子主题 - &gt; `style.css中。

 /*
    Theme Name: Aloshop child theme
    Author: Mantas Slau
    Description: A child theme of the Aloshop default WordPress theme
    Version: 1.1
    Template:     aloshop
    */

    .footer-box  h2 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 13px;
        text-transform: uppercase;
        color: #fe9c00;
    }
    .menu-footer a {
        border-left: 1px solid #dadada;
        display: block;
        height: 14px;
        line-height: 14px;
        padding: 0 13px;
        color: white;
    }
    .footer-box  p {
       color: white;
    }
    .footer-menu-box-end a {
        color: white;
        font-size: 14px;
        padding-left: 10px;
        position: relative;
    }
    .footer-menu-box-end a:hover{
        color: #fe9c00;
    }
    .footer-menu-box-end  h2 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 13px;
        text-transform: uppercase;
        color: #fe9c00;
    }
    .footer-box-contact  a {
       color: white;
    }
    .social-footer li:first-child a{
        margin-left:10;
    }
    .social-footer.social-network label {
        margin: 0 0 10px;
        color: #fe9c00;
    }
    .category-home-label span {
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
        vertical-align: middle;
    }
    ul {
        padding: 0;
        list-style: none;
    }
    .sub-menu-top {
        width: 200px;
    }
    .list-child-category {
        min-height: 155px;
    }
    .woocommerce div.product .product_title {
      font-size: 25px;
        font-weight: 700;
        margin: 0 0 13px;
        text-transform: uppercase;
    }
    .price span {
      font-size: 25px;
        font-weight: 700;
        margin: 0 0 13px;
        text-transform: uppercase;
      color: #fe9c00;
    }
    .woocommerce div.product div.images img {
        /* display: block; */
        /* width: 100%; */
        /* height: auto; */
        /* box-shadow: none; */
        width: 350px;
        padding: 1px;
        border: 1px solid #e0e0d1;
        background-color: #e0e0d1;
    }

样式代码,但没有意义。

保存---&gt;刷新和风格不起作用。 有人可以帮忙解决这个问题吗?我做错了什么?提前致谢

2 个答案:

答案 0 :(得分:0)

我找到了解决方案。我的浏览器会创建cookie。因此,在刷新需要之前按ctrl + f5,它将清除浏览器。我的代码很好。

答案 1 :(得分:0)

在function.php文件中,

而不是&#34; aloshop&#34;

wp_enqueue_style( 'aloshop',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));

使用&#34; aloshop-child&#34;调用style.css文件。

wp_enqueue_style( 'aloshop-child',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));