WordPress memo

/ 2014/10/20 /
WordPressの記事、固定ページにオリジナルのPHPを挿入したい。
で、ショートコードの登場。

まず、function.phpに呼び出すための一文を追加。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/or-php/$file.php");
    return ob_get_clean();
} add_shortcode('myphp', 'Include_my_php');


で、PHPをサーバのテーマフォルダに格納。
今回、"/or-php/$file.php"としたのは【or-php】という
フォルダにオリジナルのPHPはまとめて格納しとこうと思ったから。

PHPはこんな感じ。

<div id="cont-list">
<?php
/*
Template Name: archive_all
*/
?>
         <?php the_post() ?>
         <h2 class="page-title"><?php the_title(); ?></h2>
         <?php the_content() ?>

         <?php wp_get_archives("type=postbypost");?>
</div>
<br/><br/><br/><br/><br/><br/><br/>



因みにこれは、過去にアップした記事のタイトルを全て一覧で表示させようとしている。
表示はリストになって表示されるので、CSSでボタン化させている。
<div id="cont-list"></div>がそれ。<br/>をPHP内に記述してもちゃんと反応してくれている。
で、どんなCSSかというと…


#cont-list ul{
margin: 0;
padding: 0;
list-style: none;
}
#cont-list li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#cont-list li a{
display: block;
border-left: 0px solid #474655;
border-top: 0px solid #474655;
border-bottom: 0px solid #474655;
background-color: #f6f6f6;
border-radius: 10px;
padding: 10px 2px;
text-decoration: none;
color: #333;
width: 200px;
margin: 2px 2px;
text-align: center;
font-size: 14px;
}
#cont-list li a:hover{
border-left: 0px solid #474655;
border-top: 0px solid #474655;
border-bottom: 0px solid #474655;
background-color: #d0d0d0;
border-radius: 10px;
}
#cont-list #haji li a{
display: block;
border: 1px solid #474655;
background-color: #fff;
padding: padding: 3px 10px;;
text-decoration: none;
color: #333;
width: 200px;
margin: 1px 0px;
text-align: center;
font-size: 14px;
}
#cont-list #haji li a:hover{
display: block;
border: 1px solid #474655;
background-color: #F3D898;
}




と、こんな感じ。
ショートコードは、例えば固定ページに表示させるなら

[myphp file='test']


と一発。
'test'とは、アップロードしたPHPの書類の名称がtest.phpだから。
動作確認後、ちゃんとした名前にはします…

要するにこれは…
functionにオリジナルのPHPを表示させますよ、場所はここですよ、としておいて、
その命令を、ショートコードで発動させている
という仕組みらしい。

色々試したけれども、どれも上手くいかずに結局、上記の方法で対応。
なんとか、ちゃんと動いてる。

因みに、Shotokuというテンプレートをベースに構築している。
このテンプレートで、以前使ったFunky boxとかっていうLightboxが競合してしまうようなので、
Lightbox2を使ってみた。問題なく稼働。



参考



Design Labels

 
Copyright © 2010 Cave Graphic LAB, All rights reserved
Design by DZignine. Powered by Blogger