为帖子添加 javascript答案

【问题标题】：Add a javascript for posts为帖子添加 javascript
【发布时间】：2015-08-30 07:24:22
【问题描述】：

我对 Javascript 一无所知。我在 Wordpress 中使用 Ignite 主题。我试图在我的网站中添加一个灯箱画廊： http://dimsemenov.com/plugins/magnific-popup/ > “Zoom-gallery”示例

所以我把html代码放在post里，把CSS放在style.css中，但我不知道我必须把javascript放在哪里。我试图在 content-page.php、content.php、header.php 或 footer.php 中（在脚本标记之间）传递它，但它不起作用。

HTML

<div class="zoom-gallery">
    <a href="http://farm4.staticflickr.com/3763/9204547649_0472680945_o.jpg" data-source="http://500px.com/photo/32736307" title="Into The Blue" style="width:193px;height:125px;">
        <img src="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg" width="193" height="125">
    </a>
    <a href="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg" data-source="http://500px.com/photo/32554131" title="Light Sabre" style="width:82px;height:125px;">
        <img src="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" width="82px" height="125">
    </a>
</div>

CSS

.image-source-link {
    color: #98C3D1;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
        opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
        opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

JAVASCRIPT

$(document).ready(function() {
    $('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {
                return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
            }
        },
        gallery: {
            enabled: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function(element) {
                return element.find('img');
            }
        }

    });
});

【问题讨论】：

标签： javascript php html css

【解决方案1】：

找到实际的主题文件夹。如果没有 crate，应该有一个名为“js”的文件夹，它将这个脚本放入该“js”文件夹中的某个 js 文件中，并将其包含在同一目录中名为 index.php 的文件中。

【讨论】：

没关系，我刚刚安装了 Notpad++，现在它可以工作了。那么我必须在
不，你不需要。只需将准备好的函数放入该js文件保存并使用脚本标记包含到index.php中。
它不起作用。我可能做错了什么。我在 js 文件夹中创建了一个 js 文件，放入 javascript，保存它。然后找到“Ignite”文件夹中的index.php，并将脚本放在文件末尾的脚本标签之间并保存
@edou777 确保 js 文件包含成功。在 chrome 打开开发控制台并查找 404 错误。或查看页面源代码。
好的，这就是我在您的第一个答案中没有得到的。 index.php中的“包含”js文件是什么意思？我所做的只是通过了 index.php 文件末尾的 javascript。