JQueryのアップロードが完了したら
投稿や固定ページでPHPが動作するようにします
プラグインの追加で「exec-php」を検索、今日現在でバージョン4.9です
<Exec-PHPの使用>
1.exec-phpを有効化し、設定をします
プラグインを有効化すると設定の中に「Exec-PHP」が追加されていますので選択
2.Exec-PHP Settingsの画面で「Execute PHP code in text widgets」のチェックを入れます
3.ユーザーの管理者(自分)のプロフィールで「Disable WYSIWYG Conversion Warning」のチェックを入れます
4.「ビジュアルリッチエディターを使用しない」にチェックを入れます
固定ページでPHPコードを入力するのはテキストモードで入力します
※注意 PHPコードを入力しているページをビジュアルで表示、編集すると自動整形されてしまい、PHPとして動作しなくなります
次にJQueryUIを読み込むためにヘッダーを編集
テーマの編集から「ヘッダーheader.php」を選択し
以下のコードを挿入
<link href="http://CSSをアップロードした場所/jquery-ui.css" rel="stylesheet"> <script src="http://JSをアップロードした場所/jquery-1.9.0.js"></script> <script src="http://JSをアップロードした場所/jquery-ui-1.10.0.custom.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script>
これを
<?php wp_head(); ?>
の前に追加します
最後に固定ページでタブ表示をさせるコードを入力します
<?php echo '<div id="tabs">'; //タブの順番を整える為スラッグでソートしてます $catargs = array( 'taxonomy' => 'category','orderby' => 'slug' ); $catlists = get_categories( $catargs ); // タブ部分 echo "<ul>"; foreach($catlists as $category) { //長いので改行してますがechoからli> ';まで1行で入力してください echo '<li><a href="#tabs-' .$category->slug. ' " class="tabs-' .$category->slug. '">' . $category->name.'</a></li> '; } echo "</ul>"; foreach($catlists as $cat) : echo '<div id="tabs-' .$cat->slug. '">'; $my_posts = get_posts( 'cat='.$cat->term_id); global $post; if ( $my_posts ) { // 該当する投稿があったら echo "<ul style='list-style-type:none'>\n"; foreach ( $my_posts as $post ) : setup_postdata( $post ); echo "<li>"; echo get_the_date('Y/m/d'); echo "<a href='"; the_permalink(); echo "' style='margin:5px;'>"; the_title(); echo "</a></li>"; endforeach; // 投稿のループ終わり echo "</ul>"; } wp_reset_postdata(); echo '</div>'; endforeach; echo '</div>'; ?>
そして新着情報をカテゴリーごとにタブ表示させると
↓ こんな感じに! ↓