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

标签 javascript php html css wordpress

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

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

-我尝试通过添加 php 代码在下面的 Html 页面中调用。

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

谢谢

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

元素 1

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

    <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>

最佳答案

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

  1. 导入创建短代码的 PHP 文件。然后在所需的 HTML/PHP 文件中使用函数而不是短代码作为所需代码。

请记住,一旦您离开 WordPress CMS 短代码几乎就没有用了。祝你好运。

关于javascript - 如何将 Wordpress phpshortcode 添加到 HTML 页面或自定义模板中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43535291/

相关文章:

javascript - 自动更改输入值

javascript - 移动视口(viewport)上的 Accordion 菜单

上传文件 &lt;input&gt; 的 php javascript 表单验证

javascript - 使用 html、javascript 和 css 为来自表单的每个用户输入在 div 中制作特定的错误消息

javascript - AngularJS 中是否有用于在标记中创建子作用域的简写?

javascript - GitHub 使用哪个库来美化 JavaScript 代码?

PHP Foreach 循环效率

php - 我应该将 PHPMyAdmin 上传到服务器吗

javascript - 如何使这个URL框搜索机目标在一个新的_blank窗口中?

jquery - html/css mobile设置图片大小时,宽度/高度的百分比是根据屏幕尺寸决定的吗?