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
。在标题中输入首页,在右侧您将看到模板。点击下拉菜单并选择手风琴,然后点击发布按钮。
现在,单击网站或博客名称的左上角以检查幻灯片。