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/>
因みにこれは、過去にアップした記事のタイトルを全て一覧で表示させようとしている。
表示はリストになって表示されるので、ＣＳＳでボタン化させている。
<div id="cont-list"></div>がそれ。<br/>をPHP内に記述してもちゃんと反応してくれている。
で、どんなＣＳＳかというと…
#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を表示させますよ、場所はここですよ、としておいて、
その命令を、ショートコードで発動させている
という仕組みらしい。
色々試したけれども、どれも上手くいかずに結局、上記の方法で対応。
なんとか、ちゃんと動いてる。
このテンプレートで、以前使ったFunky boxとかっていうLightboxが競合してしまうようなので、
Lightbox2を使ってみた。問題なく稼働。
参考
