0
私はカスタムワードプレスのテーマを作ろうとしています。 Jqueryプラグイン(スライドショー)をインストールしたい私はこれまでに作成したテーマをインストールしましたが、私のテーマとのプラグインインターフェースの作り方は分かりません。私はdivにスペースを宣言するか、テーマにいくつかのPHPコードを配置して、プラグインがどこに行くかを知る必要がありますか?カスタムテーマのワードプレスのプラグイン
私はカスタムワードプレスのテーマを作ろうとしています。 Jqueryプラグイン(スライドショー)をインストールしたい私はこれまでに作成したテーマをインストールしましたが、私のテーマとのプラグインインターフェースの作り方は分かりません。私はdivにスペースを宣言するか、テーマにいくつかのPHPコードを配置して、プラグインがどこに行くかを知る必要がありますか?カスタムテーマのワードプレスのプラグイン
スライダのjqueryコードを直接記述することができます。例えば、私のテンプレートページにアコーディオンスライダーを適用する:
header.php
ファイル、あなたのスライダが表示されるように、
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;
wp_title('|', true, 'right');
// Add the blog name.
bloginfo('name');
// Add the blog description for the home/front page.
$site_description = get_bloginfo('description', 'display');
if ($site_description && (is_home() || is_front_page()))
echo " | $site_description";
// Add a page number if necessary:
if ($paged >= 2 || $page >= 2)
echo ' | ' . sprintf(__('Page %s', 'twentyeleven'), max($paged, $page));
?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"
type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"
type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
$(document).ready(function() {
$('.kwicks').kwicks({
max : 800,
spacing : 5
});
});
</script>
<!--end Accordion-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<div class="line"></div>
<!-- logo -->
<h1 class="logo"><a href="#">xcvdfgdf - Career Development
Centre</a></h1>
<!-- main nav -->
<nav id="nav">
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
</header>
<?php wp_head(); ?>
その後、あなたのカスタムテーマフォルダに保存したいslider.php
を作成
<?php
/**
* Template Name: accordion
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header(); ?>
<body>
<!-- main -->
<div id="main">
<!-- gallery -->
<section class="intro gallery">
<div class="gallery-holder">
<div class="slider_list_accordion">
<ul class="kwicks horizontal" >
<li id="kwick_1"><img src="<?php
bloginfo('template_url'); ?>/images/slider-1.png" alt=""
/></li>
<li id="kwick_2"><img src="<?php
bloginfo('template_url'); ?>/images/slider-2.png" alt=""
/></li>
<li id="kwick_3"><img src="<?php
bloginfo('template_url'); ?>/images/slider-3.png" alt=""
/></li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
次に、footer.php
<footer id="footer">
<div class="footer-holder">
<div class="container">
<div class="case">
<!-- contact -->
<div class="contact">
<section class="contact-holder">
<h4>Get in Touch</h4>
<dl>
<dt>Telephone:</dt>
<dd>+1 800 603 6035</dd>
<dt>Fax:</dt>
<dd>+1 800 889 9898</dd>
<dt>E-mail:</dt>
<dd><a
href="mailto:[email protected]">[email protected]</a></dd>
</dl>
<address>9870St Vincent Place, <br >Glasgow, DC 45 Fr
45.</address>
</section>
<div class="add">
<div class="case">
<strong class="copyright">©
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
<nav class="add-nav">
<ul>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
次に、WordpressでPages->Add new
に行きます。タイトルに「ホーム」と入力し、右側に「テンプレート」が表示されます。ドロップダウンをクリックし、accordionを選択して[公開]ボタンをクリックします。
ウェブサイトまたはブログの左上隅をクリックして、スライドを確認します。