1373190988 添付画像のコードをwordpress投稿ページで表現させる方法はないでしょうか?

現在、写真登録等ではwordpressのカスタムフィールドテンプレートを使っているので[photo1]等のコードをできれば使いたいです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/07 18:56:28
  • 終了:2013/07/08 10:53:54

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/07/08 08:04:35

ポイント100pt

1.カスタムフィールドテンプレートの設定画面で、「[cft] and [cftsearch] Shortcode Format」の「FORMAT #n」(※nは数値です。まだ使っていない入力欄)に次のコードを入力し、「PHPを使用する」にチェックを入れて設定を更新します。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/slideshow.css" media="screen" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/mootools-1.3.2-core.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/mootools-1.3.2.1-more.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'<?php echo wp_get_attachment_url(post_custom('Photo1※ここはショートコードのキーです。')); ?>': { caption: 'キャプションのテキスト※ショートコードの場合は、[ショートコードのキー]' },
'<?php echo wp_get_attachment_url(post_custom('Photo2')); ?>': { caption: 'タイトル2' },
'<?php echo wp_get_attachment_url(post_custom('Photo3')); ?>': { caption: 'タイトル3' },
'<?php echo wp_get_attachment_url(post_custom('Photo4')); ?>': { caption: 'タイトル4' },
'<?php echo wp_get_attachment_url(post_custom('Photo5')); ?>': { caption: 'タイトル5' },
'<?php echo wp_get_attachment_url(post_custom('Photo6')); ?>': { caption: 'タイトル6' },
'<?php echo wp_get_attachment_url(post_custom('Photo7')); ?>': { caption: 'タイトル7' },
'<?php echo wp_get_attachment_url(post_custom('Photo8')); ?>': { caption: 'タイトル8' },
'<?php echo wp_get_attachment_url(post_custom('Photo9')); ?>': { caption: 'タイトル9' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: '', replace: [/(\.[^\.]+)$/, '-150x150$1'], thumbnails: true, width: 600});
});
//]]>
</script>
<div id="show" class="slideshow">
<img src="<?php echo wp_get_attachment_url(post_custom('Photo1※ここはショートコードのキーです。')); ?>" alt="写真画像のタイトル" />
</div>

※「replace: [/(\.[^\.]+)$/, '-150x150$1']」の「-150x150」部分は、サムネイル画像のサイズです。デフォルトでは150×150で作成されますが、以前の質問で回答したように任意のサイズを登録する事も可能です。(設定以降、画像アップロード時に作成されるようになります。)
http://q.hatena.ne.jp/1358767108#a1186465
※追加作成したい画像のサイズは、「add_image_size( 'slideshow-thumbnail', 100, 100, true );」で登録しますが、詳細は回答の返信欄を参照してください。


2.「mootools-1.3.2-core.js」「mootools-1.3.2.1-more.js」「slideshow.js」をテーマの「js」ディレクトリに、「slideshow.css」と画像(※コントローラのボタン等)をテーマの「css」ディレクトリにアップロードします。


3.サムネイル画像のサイズに合わせてスタイルシートを変更します。

・「slideshow.css」の201行目の「bottom」と「height」を画像の高さ+15pxの数値に指定します。

.slideshow-thumbnails {
	bottom: -165px; height: 165px; left: 0; position: absolute; width: 100%;
}

※「bottom」の値はマイナスになる事に注意してください。


4.記事作成時に次のショートコードを入力します。

[cft format=n]

※「n」は手順1でコードを設定したFORMATの入力欄の数値です。


・画像URLの取得 wp_get_attachment_image_src
http://ja.forums.wordpress.org/topic/3134

・Function Reference/wp get attachment url
http://codex.wordpress.org/Function_Reference/wp_get_attachment_url

id:kaji0245

いつも助かります、ありがとうございます<(_ _)>

2013/07/08 10:53:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません