我想把这个脚本集成到桥主题中:
https://github.com/yangar/keywords-generator
我已经通过 functions.php 文件在我的主题中正确地加入了 css 和 js 文件。
<?php
// enqueue the child theme stylesheet
Function wp_schools_enqueue_scripts() {
wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css' );
wp_enqueue_style( 'childstyle' );
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/js/jquery.keywords.finder.js','','',true );
wp_register_script( 'custom-script1', get_stylesheet_directory_uri() . '/js/DataTables/buttons.html5.js','','',true );
wp_register_script( 'custom-script2', get_stylesheet_directory_uri() . '/js/DataTables/dataTables.buttons.js','','',true );
wp_register_script( 'custom-script3', get_stylesheet_directory_uri() . '/js/DataTables/jquery.dataTables.js','','',true );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
wp_enqueue_script( 'custom-script1' );
wp_enqueue_script( 'custom-script2' );
wp_enqueue_script( 'custom-script3' );
// Register the style like this for a theme:
wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/DataTables/css/dataTables.bootstrap.min.css' );
wp_register_style( 'custom-style1', get_stylesheet_directory_uri() . '/css/DataTables/css/responsive.bootstrap.min.css' );
wp_register_style( 'custom-style2', get_stylesheet_directory_uri() . '/css/DataTables/css/buttons.dataTables.min.css' );
wp_register_style( 'custom-style3', get_stylesheet_directory_uri() . '/css/Site.css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
wp_enqueue_style( 'custom-style1' );
wp_enqueue_style( 'custom-style2' );
wp_enqueue_style( 'custom-style3' );
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"), false, '2.1.4');
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);
然后，我创建了一行并将 HTML 代码插入其中。
<div class="container">
<div class="jumbotron">
<input id="gg-lang" type="hidden" value="en" />
<div class="row panel-keyword">
<div class="col-xs-12">
<input id="search" type="text" class="form-control input-lg text-center" placeholder="Enter a keyword" aria-describedby="startjob">
</div>
<div class="col-xs-12 text-center">
<label class="radio-inline">
<input type="radio" name="MethodOptions" id="Method1" value="1"> Method 1
</label>
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#MethodModal1">?</button>
<label class="radio-inline">
<input type="radio" name="MethodOptions" id="Method2" value="2" checked> Method 2
</label>
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#MethodModal2">?</button>
</div>
<div class="col-xs-12 text-center padding-top">
<div role="group" class="btn-group">
<div class="btn-group" role="group">
<button role="group" type="button" class="btn btn-default btn-group dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="lang">English</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu select-lang">
<li data-lang="">Any language</li>
<li data-lang="af">Afrikaans</li>
<li data-lang="sq">Albanian (Shqip)</li>
<li data-lang="sm">Amharic</li>
<li data-lang="ar">Arabic (العربية)</li>
<li data-lang="az">Azerbaijani (Azərbaycanca)</li>
<li data-lang="eu">Basque (Euskal)</li>
<li data-lang="be">Belarusian (Беларуская)</li>
<li data-lang="bn">Bengali (বাঙ্গালী)</li>
<li data-lang="bh">Bihari (বিহারী)</li>
<li data-lang="bs">Bosnian (Bosanski)</li>
<li data-lang="bg">Bulgarian (Български)</li>
<li data-lang="ca">Catalan (Català)</li>
<li data-lang="zh-CN">Chinese - Simplified (中国 - 简体)</li>
<li data-lang="zh-TW">Chinese - Traditional (中文 - 繁體)</li>
<li data-lang="hr">Croatian (Hrvatski)</li>
<li data-lang="cs">Czech (Čeština)</li>
<li data-lang="da">Danish (Dansk)</li>
<li data-lang="nl">Dutch (Nederlands)</li>
<li data-lang="en" selected="selected">English</li>
<li data-lang="eo">Esperanto</li>
<li data-lang="et">Estonian (Eesti)</li>
<li data-lang="fo">Faroese (Føroyskt)</li>
<li data-lang="fi">Finnish (Suomi)</li>
<li data-lang="fr">French (Français)</li>
<li data-lang="fy">Frisian</li>
<li data-lang="gl">Galician (Galego)</li>
<li data-lang="ka">Georgian (ქართული)</li>
<li data-lang="de">German (Deutsch)</li>
<li data-lang="el">Greek (ελληνικά)</li>
<li data-lang="gu">Gujarati (ગુજરાતી)</li>
<li data-lang="iw">Hebrew (עברית)</li>
<li data-lang="hi">Hindi (हिंदी)</li>
<li data-lang="hu">Hungarian (Magyar)</li>
<li data-lang="is">Icelandic</li>
<li data-lang="id">Indonesian (Bahasa Indonesia)</li>
<li data-lang="ia">Interlingua</li>
<li data-lang="ga">Irish (Gaeilge)</li>
<li data-lang="it">Italian (Italiano)</li>
<li data-lang="ja">Japanese (日本語)</li>
<li data-lang="jw">Javanese (Jawa)</li>
<li data-lang="kn">Kannada (ಕನ್ನಡ)</li>
<li data-lang="ko">Korean (한국어)</li>
<li data-lang="la">Latin (Latine)</li>
<li data-lang="lv">Latvian (Latviešu Valoda)</li>
<li data-lang="lt">Lithuanian (Lietuvių Kalba)</li>
<li data-lang="mk">Macedonian (Македонски Јазик)</li>
<li data-lang="ms">Malay (Bahasa Melayu)</li>
<li data-lang="ml">Malayam (മലയാളം)</li>
<li data-lang="mt">Maltese (Malti)</li>
<li data-lang="mr">Marathi (मराठी)</li>
<li data-lang="ne">Nepali (नेपाली)</li>
<li data-lang="no">Norwegian (Norsk)</li>
<li data-lang="nn">Norwegian (Nynorsk)</li>
<li data-lang="oc">Occitan (Lenga d&#039;òc)</li>
<li data-lang="fa">Persian (فارسی)</li>
<li data-lang="pl">Polish (Polski)</li>
<li data-lang="pt-BR">Portuguese - Brazil (Português - Brasil)</li>
<li data-lang="pt-PT">Portuguese - Portugal (Português - Portugal)</li>
<li data-lang="pa">Punjabi (ਪੰਜਾਬੀ ਦੇ)</li>
<li data-lang="ro">Romanian (Român)</li>
<li data-lang="ru">Russian (Русский)</li>
<li data-lang="gd">Scottish Gaelic (Gàidhlig)</li>
<li data-lang="sr">Serbian (Cрпски)</li>
<li data-lang="si ">Sinhalese (සිංහල)</li>
<li data-lang="sk">Slovak (Slovenský)</li>
<li data-lang="sl">Slovenian (Slovenščina)</li>
<li data-lang="es">Spanish (Español)</li>
<li data-lang="su">Sudanese</li>
<li data-lang="sw">Swahili (Kiswahili)</li>
<li data-lang="sv">Swedish (Svenska)</li>
<li data-lang="tl">Tagalog</li>
<li data-lang="ta">Tamil (தமிழ்)</li>
<li data-lang="te">Telugu</li>
<li data-lang="th">Thai (ภาษาไทย)</li>
<li data-lang="ti">Tigrinya (ትግርኛ)</li>
<li data-lang="tr">Turkish (Türk)</li>
<li data-lang="uk">Ukrainian (Українська)</li>
<li data-lang="ur">Urdu (اُردُو)</li>
<li data-lang="uz">Uzbek (O’zbekcha)</li>
<li data-lang="vi">Vietnamese (Việt)</li>
<li data-lang="cy">Welsh (Cymraeg)</li>
<li data-lang="xh">Xhosa</li>
<li data-lang="zu">Zulu</li>
</ul>
</div>
<button role="group" id="startjob" class="btn btn-primary" type="button">Find Keywords</button>
</div>
</div>
<div class="col-xs-12 padding-top hidden">
<div class="alert alert-warning text-center" role="alert"><h2 id="keywordtoquery"></h2></div>
</div>
<div class="col-md-4 hidden">
<div class="well text-center"><div>Done</div><h3><span class="label label-warning" id="done"></span></h3></div>
</div>
<div class="col-md-4 hidden">
<div class="well text-center">To Do<br /><h3><span class="label label-danger" id="to-do"></span></h3></div>
</div>
<div class="col-md-4 hidden">
<div class="well text-center">Found<br /><h3><span class="label label-success" id="keywordsCounter"></span></h3></div>
</div>
</div>
<div class="progress progress-striped active hidden">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="row hidden">
<div class="col-md-12">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped dt-responsive nowrap" id="example"></table>
</div>
<div id="result" class="col-md-12">
</div>
</div>
</div>
<div class="container body-content">
<hr />
<footer>
<!--Don't remove this link it's a part of the open source licence http://creativecommons.org/licenses/by-sa/3.0/ -->
<p class="text-center">Keyword Finder by <a href="http://keywords.zone">Keywords.Zone</a></p>
<!--Don't remove this link it's a part of the open source licence http://creativecommons.org/licenses/by-sa/3.0/ -->
</footer>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/datatables/jquery.dataTables.js"></script>
<script src="js/DataTables/dataTables.buttons.js"></script>
<script src="js/DataTables/buttons.html5.js"></script>
<script src="js/jquery.keywords.finder.js"></script>
<script type="text/javascript">
window.setInterval($().DoJob, 750);
$("#startjob").on("click", function () {
$(".hidden").removeClass("hidden");
if ($("input[name=MethodOptions]:checked").val() == 1) {
$().StartJobMethod1();
}
else {
$().StartJobMethod2();
}
});
$(".select-lang li").on("click", function () {
$("#lang").html($(this).html());
$("#gg-lang").val($(this).data("lang"));
});
</script>
您可以查看自己@ http://www.longtailo.com/
jQuery 在所有库之前加载。
那么为什么会这样显示呢？为什么我会收到错误并且表单根本不起作用？
我什至尝试在 html raw 中用 $j 更改 $。正如主题的选项面板所说:
Enter your custom Javascript here (jQuery selector is "$j" because of the conflict mode)
但仍然没有...
最佳答案
$(function() {
$("#startjob").on("click", function () {
$("div.hidden").removeClass("hidden");
if ($("input[name=MethodOptions]:checked").val() == 1) {
$().StartJobMethod1();
}
else {
$().StartJobMethod2();
}
});
$(".select-lang li").on("click", function () {
$("#lang").html($(this).html());
$("#gg-lang").val($(this).data("lang"));
});
});
关于javascript - 将javascript集成到wordpress主题中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37301275/