1. ホーム
  2. 質問と答え
  3. カスタムテーマのワードプレスのプラグイン

カスタムテーマのワードプレスのプラグイン

2012-03-27 32 views
0

私はカスタムワードプレスのテーマを作ろうとしています。 Jqueryプラグイン（スライドショー）をインストールしたい私はこれまでに作成したテーマをインストールしましたが、私のテーマとのプラグインインターフェースの作り方は分かりません。私はdivにスペースを宣言するか、テーマにいくつかのPHPコードを配置して、プラグインがどこに行くかを知る必要がありますか？カスタムテーマのワードプレスのプラグイン

出典

2012-03-27 user1155141

答えて

0

スライダの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">&copy; 
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を選択して[公開]ボタンをクリックします。

ウェブサイトまたはブログの左上隅をクリックして、スライドを確認します。

出典

2012-05-10 10:11:05

関連する問題

 関連する問題