人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

添付画像のコードをwordpress投稿ページで表現させる方法はないでしょうか?
現在、写真登録等ではwordpressのカスタムフィールドテンプレートを使っているので[photo1]等のコードをできれば使いたいです。

1373190988
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント ベストアンサー

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


kaji0245さんのコメント
いつも助かります、ありがとうございます<(_ _)>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ