如何将Wordpress phpshortcode添加到HTML页面或自定义模板?

时间:2017-04-21 06:19:30

标签: javascript php html css wordpress

我需要将一个wordpress插件短代码调用到另一个html页面,这个html页面不在wordpress页面或帖子中。

我想将搜索栏的phpshortcode [<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>]添加为模板中的固定标题

-i尝试通过添加php代码来调用下面的Html页面。

它什么都不做,没有任何输出。 那么如何将wordpress插件函数及其短代码调用为html页面文件。

由于

---下面的Html模板----

项目1

https://fonts.googleapis.com/css?family=Lato:300,400'rel ='stylesheet'type ='text / css'&gt;

    <script type="text/javascript">
        var currentIndex = 0;
        var currentId = "camera";
        var dragStarted = false;
        $(document).ready(function() {
            $(document).on("menuready",function(event){
                $("html,body").css("background","#1abc9c");
                console.log(event);
            });

            $(document).on("menudrag",function(event){
                if(!dragStarted){
                    dragStarted = true;
                    $("#overlay").show();
                    $("#overlay").transition({
                        opacity : 1
                    },300);
                }
            });

            $(document).on("menudragend",function(event){

                var curr = eval("colors."+currentId);
                $("#overlay").transition({
                    opacity : 0
                },300,function(){
                    $("#overlay").hide();
                    dragStarted = false;
                });
                setTimeout(function(){
                    $(".ferromenu-controller,#nav li a").css("color",curr.background);
                },250);
            });

            $("#nav").ferroMenu({
                position    : "left-center",
                delay       : 50,
                rotation    : 720,
                margin      : 20,
                opened      : true
            });


        });

        var colors = {
                "camera" : {
                    "background" : "#1abc9c",
                    "index" : 0
                },
                "user" : {
                    "background" : "#f39c12",
                    "index" : 1
                },
                "mapmarker" : {
                    "background" : "#e67e22",
                    "index" : 2
                },
                "music" : {
                    "background" : "#8e44ad",
                    "index" : 3
                },
                "commentalt" : {
                    "background" : "#34495e",
                    "index" : 4
                },
                "moon" : {
                    "background" : "#3498db",
                    "index" : 5
                }

        };

        function goTo(id){
            var obj = eval("colors."+id);

            $("body").css("background",obj.background);
            $(".ferromenu-controller,#nav li a").css("color",obj.background);
            if(obj.index > currentIndex){
                $(".active").addClass("off");
                $(".active").transition({
                    scale : 0.1,
                    opacity : 0,
                    zIndex : 0
                },600);

                $("#"+currentId).removeClass("active");

                $("#"+id).addClass("active");
                $("section").addClass("hideScroll");
                $("#"+id).transition({
                    scale   : 3,
                    y       : 0
                },0,function(){
                    $("#"+id).removeClass("off");
                    $("#"+id).transition({
                        scale : 1,
                        opacity : 1,
                        zIndex : 2
                    },600,function(){
                        $("section").removeClass("hideScroll");
                    });
                });
            }else if(obj.index < currentIndex){
                var oldElement = $(".active");
                $(".active").addClass("off");
                $(".active").transition({
                    scale : 3,
                    opacity : 0,
                    zIndex : 0
                },600);
                $("#"+currentId).removeClass("active");


                $("#"+id).addClass("active");
                $("section").addClass("hideScroll");

                $("#"+id).transition({
                    scale : 0.1,
                    y : 0
                },0,function(){
                    $("#"+id).removeClass("off");
                    $("#"+id).transition({
                        scale : 1,
                        opacity : 1,
                        zIndex : 2
                    },600,function(){
                        $(oldElement).transition({
                            y : -2000
                        },100,function(){
                            $("section").removeClass("hideScroll"); 
                        });

                    });
                });
            }
            currentIndex = obj.index;
            currentId = id;

        }
    </script>
</head>
<body>
    <ul id="nav">
        <li><a href="javascript:goTo('camera');"><i class="icon-camera"></i></a></li>
        <li><a href="javascript:goTo('user');"><i class="icon-user"></i></a></li>
        <li><a href="javascript:goTo('mapmarker');"><i class="icon-map-marker"></i></a></li>
        <li><a href="javascript:goTo('music');"><i class="icon-music"></i></a></li>
        <li><a href="javascript:goTo('commentalt');"><i class="icon-comment-alt"></i></a></li>
        <li><a href="javascript:goTo('moon');"><i class="icon-moon"></i></a></li>
    </ul>
    <section id="content">
        <div id="overlay"></div>
        <article id="camera" class="active">
            <i class="icon-camera"></i>
            <h1>Camera</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="user" class="off">
            <i class="icon-user"></i>
            <h1>User</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="mapmarker" class="off">
            <i class="icon-map-marker"></i>
            <h1>Marker</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="music" class="off">
            <i class="icon-music"></i>
            <h1>Music</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="commentalt" class="off">
            <i class="icon-comment-alt"></i>
            <h1>Comment</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="moon" class="off">
            <i class="icon-moon"></i>
            <h1>Moon</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
    </section>
</body>

2 个答案:

答案 0 :(得分:0)

您不想运行短代码。这真的是不可能的,因为短代码可以与WordPress CMS一起使用。最好的办法是以下

  1. 导入创建短代码的PHP文件。然后在所需的HTML / PHP文件中使用函数而不是短代码来获取所需的代码。
  2. 记住一旦你离开WordPress CMS短代码几乎没用。祝好运。

答案 1 :(得分:0)

将文件名更改为.php并执行<?php require( '../wp-load.php' ); // if file is in your wp-contents folder,然后您可以在.php文件中以<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>方式调用您的衬衫码。

并且您无法在HTML中添加php,您必须将文件扩展名更改为.php

<?php 
require( '../wp-load.php' );
echo do_shortcode('[wpdreams_ajaxsearchlite]');
?>