wordpress主题开发时字体样式更改

Question

在将HTML和CSS转换为wordpress时，我使用了以下代码，我无法在HTML页面中保留我的旧字体样式。当我使用get_theme mod()时，我丢失了我的旧字体样式。现在该怎么办？我已经在下面的functions.php函数中发布了我的代码

//popular course
$wp_customize->add_section('lwp_popular_course', array(
    'title' => 'Popular Course Edit'));

$wp_customize->add_setting('lwp_popular_courses_heading', array(
    'default' => 'Popular Courses'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular_courses_control', array(
        'label' => 'Popular Courses',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_courses_heading',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_courses_heading', array(

    'selector' => 'span#addpopularcourse',
));

$wp_customize->add_setting('lwp_popular_1', array(
    'default' => 'SSC CGL /CHSL'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular1_control', array(
        'label' => 'Popular Courses1',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_1',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_1', array(

    'selector' => 'span#addpopularcourse1',
));

$wp_customize->add_setting('lwp_popular_image_1');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage1_control', array(
        'label' => 'Image1',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_1',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_1', array(

    'selector' => 'span#addpopularimage1',
));

$wp_customize->add_setting('lwp_popular_2', array(
    'default' => ' BANK PO/CLERK '));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular2_control', array(
        'label' => 'Popular Courses2',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_2',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_2', array(

    'selector' => 'span#addpopularcourse2',
));

$wp_customize->add_setting('lwp_popular_image_2');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage2_control', array(
        'label' => 'Image2',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_2',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_2', array(
    'selector' => 'span#addpopularimage2',
));

$wp_customize->add_setting('lwp_popular_3', array(
    'default' => 'PSC'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular3_control', array(
        'label' => 'Popular Courses3',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_3',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_3', array(
    'selector' => 'span#addpopularcourse3',
));

$wp_customize->add_setting('lwp_popular_image_3');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage3_control', array(
        'label' => 'Image3',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_3',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_3', array(
    'selector' => 'span#addpopularimage3',
));

$wp_customize->add_setting('lwp_popular_4', array(
    'default' => ' RAILWAY'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular4_control', array(
        'label' => 'Popular Courses4',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_4',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_4', array(
    'selector' => 'span#addpopularcourse4',
));

$wp_customize->add_setting('lwp_popular_image_4');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage4_control', array(
        'label' => 'Image4',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_4',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_4', array(
    'selector' => 'span#addpopularimage4',
));

HTML页面如下所示。当我使用get_theme_mod()时，所有的字体样式都会失真。

distorted original

                <div id="course-carousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_1'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">
                                            </div>
                                        </div>
                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                    <span id="addpopularcourse1">
                                                    <?php echo get_theme_mod('lwp_popular_1');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <span id="addpopularimage1"> 
                                                <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_2'));?>                                                         " alt="Avatar" class="edufair-related-course-image"></span>
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                            <a href="#" class="">
                                                <h3>
                                                    <span id="addpopularcourse2">
                                                    <?php echo get_theme_mod('lwp_popular_2');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_3'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                <span id="addpopularcourse4">
                                                    <?php echo get_theme_mod('lwp_popular_3');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_4'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                <span id="addpopularcourse4">
                                                    <?php echo get_theme_mod('lwp_popular_4');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>



                    </div>

                </div>
            </div>
        </div>

Answer 1

你添加wp_head了吗？

这个钩子允许您输出自定义生成的CSS，以便您的更改在实时网站上正确显示。

https://codex.wordpress.org/Theme_Customization_API