0
我試圖做一個自定義WordPress主題。我想安裝一個jquery插件(幻燈片)。我到目前爲止已經安裝了我創建的主題,但不知道如何使用我的主題製作插件界面。我需要在div中聲明一個空格還是在主題中放置一些php代碼,以便插件知道要去哪裏?wordpress插件與自定義主題
我試圖做一個自定義WordPress主題。我想安裝一個jquery插件(幻燈片)。我到目前爲止已經安裝了我創建的主題,但不知道如何使用我的主題製作插件界面。我需要在div中聲明一個空格還是在主題中放置一些php代碼,以便插件知道要去哪裏?wordpress插件與自定義主題
您可以直接編寫滑塊的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(); ?>
Then,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
。在標題中輸入首頁,在右側您將看到模板。點擊下拉菜單並選擇手風琴,然後點擊發布按鈕。
現在,單擊網站或博客名稱的左上角以檢查幻燈片。