用户工具

站点工具


wordpressadvanced:css-shortcode

添加自定义CSS和短代码

如果使用的是 VPS 服务器,需检查是否开启了 scandir 函数

进入 外观 > 编辑 可以看到 WordPress 子主题的文件。可以看到子主题的 style.css 和 functions.php 等文件。

自定义 CSS

只需要将 CSS 代码填写在此即可,如修改全站的链接颜色如下:

a {color:#632c0f;}

如果在浏览前台时,CSS 代码无法起作用,可以使用强制刷新(Ctrl+F5)。

另外,CSS 执行的顺序是以最后一个定义为准,例如以下代码,链接的颜色只会显示第二个:

a {color:#632c0f;}

a {color:#d6520c;}

所以在 WordPress 加载 CSS 代码时,子主题的 CSS 代码并不一定加载在最后,如果无法显示修改后的效果,可以对 CSS 代码添加 important 优先规则。

a {color:#632c0f !important;}

自定义函数和短代码

自定义 PHP 函数和短代码,需要放置在 functions.php 里,不需要在 PHP 代码外使用 <?php?> 包围。

以下是使用 Featured Galleries 插件和其它插件组合而成,实现图片放大镜功能,并将其写入短代码,以便 Toolset 插件来调用。

function show_gallery_function() {
    $galleryArray = get_post_gallery_ids(get_the_ID());
    $the_first_pic = wp_get_attachment_url( $galleryArray[0] );;
    $the_second_pic = wp_get_attachment_url( $galleryArray[1] );
    $have_youtube_url = do_shortcode('[types field="youtube-url"][/types]');
    if($have_youtube_url!="#") {    $jb_youtube_class = " class='popup-youtube'"; 
                                    $jb_youtube_play = "<img class='yb_custom_video_play' src='".get_stylesheet_directory_uri()."/css/play.png' />";
                                    } else { $jb_youtube = null; $jb_youtube_play = null; }

    $jb_html .= "<link rel='stylesheet' href='".get_stylesheet_directory_uri()."/css/imagezoom.css' />";
    $jb_html .= "<link rel='stylesheet' href='".get_stylesheet_directory_uri()."/css/es-cus.css' />";
    $jb_html .= "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/jquery-1.8.3.min.js'></script>";
    $jb_html .= "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/jquery.imagezoom.min.js'></script>";
    $jb_html .= "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/modernizr.custom.17475.js'></script>";
    $jb_html .= "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/jquery.elastislide.js'></script>";
    $jb_html .= "<link rel='stylesheet' href='".get_stylesheet_directory_uri()."/css/magnific-popup.css' />";
    $jb_html .= "<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/jquery.magnific-popup.min.js'></script>";

    $jb_html .= "
<script type='text/javascript'>
    $(function(){
        //yb_products_gallery   standard mode
        var carsousel = $('#yb_products_gallery_carousel').elastislide({start:0,minItems:3,
            onClick:function( el, pos, evt ) {
                el.siblings().removeClass('active');
                el.addClass('active');
                carsousel.setCurrent( pos );
                evt.preventDefault();
                // for imagezoom to change image 
                var yb_products_gallery_obj = $('#yb_products_gallery').data('imagezoom');
                yb_products_gallery_obj.changeImage(el.find('img').attr('src'),el.find('img').data('largeimg'));
            },
            onReady:function(){
                //init imagezoom with many options
                $('#yb_products_gallery').ImageZoom({type:'standard',zoomSize:[480,300],bigImageSrc:'".$the_second_pic."',offset:[10,-4],zoomViewerClass:'standardViewer',onShow:function(obj){obj.\$viewer.hide().fadeIn(500);},onHide:function(obj){obj.\$viewer.show().fadeOut(500);}});
                
                $('#yb_products_gallery_carousel li:eq(1)').addClass('active');
                
                // change zoomview size when window resize
                $(window).resize(function(){
                    var yb_products_gallery_obj = $('#yb_products_gallery').data('imagezoom');
                    winWidth = $(window).width();
                    if(winWidth>900)
                    {
                        yb_products_gallery_obj.changeZoomSize(480,300);
                    }
                    else
                    {
                        yb_products_gallery_obj.changeZoomSize( winWidth*0.4,winWidth*0.4*0.625);
                    }
                });
                
            }
        });
    });
</script>
    ";

    $jb_html .= "
<script type='text/javascript'>
$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
        disableOn: 100,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});
</script>
    ";

    $jb_html .= "<div class='yb_box'>";
    $jb_html .= "<span class='yb_products_gallery_wrap'><img id='yb_products_gallery' src='".$the_second_pic."'  /></span>";
    $jb_html .= "<ul id='yb_products_gallery_carousel' class='elastislide-list'>";
    $jb_html .= "<li>";
    $jb_html .= "<a href='".$have_youtube_url."'".$jb_youtube_class.">";
    $jb_html .= "<img src='".$the_first_pic."' data-largeimg='".$the_first_pic."' />";
    $jb_html .= $jb_youtube_play;
    $jb_html .= "</a></li>";

    unset($galleryArray[0]);
    foreach ($galleryArray as $id) { 
        $image_alt = get_post_meta($id, '_wp_attachment_image_alt', true);
        $jb_html .= "<li><a href='#'>
        <img src='".wp_get_attachment_url( $id )."' alt='".$image_alt."' /></a></li>";
    }
    
    $jb_html .= "</ul></div>";

    return $jb_html;
}
add_shortcode('jb_show_gallery', 'show_gallery_function');

评论

请输入您的评论. 可以使用维基语法:
J I H D᠎ Q
 
wordpressadvanced/css-shortcode.txt · 最后更改: 2017/02/13 16:41 由 Tony