Re: 画像をクリックしてページ遷移する方法は？

partita > 画像をクリックしてページ遷移する方法は？ @ 2012/6/9 1:07
» goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/9 21:46
goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/9 21:49
partita > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/10 0:58
goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/10 11:10
partita > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/10 13:50
goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/10 16:41
partita > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/10 20:01

goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/9 21:46
こんにちは（＾＾引用：これを、「一覧画面で画像をクリックすると記事にページ遷移する」「個別記事のページで画像をクリックすると原寸拡大表示させる」ようにしたいのですが、このようなことは可能でしょうか。つまり、一覧ページでは画像クリックで記事ページに飛ぶけれども、飛んだ先の記事ページで画像をクリックすると、通常通り拡大画像が表示されるという事ですよね。一覧ページも記事ページも、データ（管理画面で打ち込まれたブログ記事の内容）としては同じものを引っ張ってきているので、一覧ページでの表示の際に細工をしないと難しそうですね。こうなってくると、技術や知識もさることながら、アイディア勝負といった感じがするので、他の方がもっと良いアイディアを出してくれるかも知れませんが、そもそも一覧ページで画像が拡大表示されるのは、aタグのhrefプロパティで画像のURLを指定し、relプロパティでポップアップウィンドウ（colorbox）を使う為の指定がしてあるからですよね。もし、画像をクリックして記事ページに飛んで欲しいということであれば、このrelプロパティを持っているリンクタグのhrefプロパティを、記事のURLに書き換えればOKですよね。書き換えるファイルは一覧表示用のレイアウトファイルになります。本来であれば「/app/webroot/themed/demo/view/blog/default/index.php」をいじりますが、デモテーマを利用されている場合、インストール直後はこの場所に入っていないと思います。以下の手順を踏めば、自動的に上記場所にコピーされ編集できるようになりますので、順番に実施してみてください。１．管理画面にログインする。２．画面右上のメニューの「プラグイン管理」をクリック。３．プラグインの一覧表から「blog」（一番上かな？）を探し、一覧表の左側にある操作アイコンの「管理」をクリック。４．ブログの一覧が出てくるので、処理を施したいブログを選び、先程と同様、操作アイコンの「管理」をクリック。５．画面の一番上の方に色々とメニューがあるので、「ブログ管理メニュー」の中から「ブログ基本設定」をクリック。６．今度は画面の一番下に「オプション」というのがあるので、クリックする。すると、項目がズラっと出てくる。７．出てきた項目の中の下の方に「コンテンツテンプレート名」という部分がある。「default」になっていると思うので、その横の「編集する」をクリック。（設定を保存して編集画面へ飛んでもいいか？と聞かれるので、OKする。）８．自動的にレイアウトファイルが生成され、編集できるようになるので、以下の通り編集を加える。出てきたレイアウト編集画面に、PHPファイルの中身が表示されていると思います。（で、念のためこの内容を全部、メモ帳か何かにコピーして、あとで不具合が起きたら復旧できるようにしておてください。）で、編集画面を見て、この中から `<?php $blog->postContent($post,true,true) ?>` という部分を探して下さい。（50行目付近かな）そこを以下のように書き換えます。 <?php //あなたのサイトのURL（最後のスラッシュまで必要！） $yourSite = 'http://www.xxx.com/basercms/'; //記事内容を取得 $blogPostData = $blog->getPostContent($post,true,true); //aタグを検索対象とする。 preg_match('/<a("[^"]"\|\'[^\']\'\|[^\'">])*>/',$blogPostData,$aTags); //ブログの名前取得 $blogName = $post['BlogContent']['name']; //ブログの記事id取得 $blogPostId = $post['BlogPost']['id']; //colorboxの対象になっている画像リンクを置き換える。 foreach($aTags as $aTag){ if(strpos($aTag, 'rel="colorbox"')){ //置き換え実施。 $blogPostData = preg_replace($aTag,'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData); } } //表示を行う。 echo $blogPostData; ?> あなたのサイトのURLを記述する場所がありますので、書いておいて下さい。今回、スマートURLを利用しているという事ですが、もし何かの事情でOFFにする場合は、このURLの箇所の最後に「index.php/」というスラッシュまで付けたindex.phpという文字を足して下さい。書き換えが終わったら、更新ボタンを押して下さい。これで作業は終わりです。いかがでしょうか？

goichi > Re: 画像をクリックしてページ遷移する方法は？ @ 2012/6/9 21:46

こんにちは（＾＾

引用：

これを、
「一覧画面で画像をクリックすると記事にページ遷移する」
「個別記事のページで画像をクリックすると原寸拡大表示させる」
ようにしたいのですが、このようなことは可能でしょうか。

つまり、一覧ページでは画像クリックで記事ページに飛ぶけれども、飛んだ先の記事ページで画像をクリックすると、通常通り拡大画像が表示されるという事ですよね。

一覧ページも記事ページも、データ（管理画面で打ち込まれたブログ記事の内容）としては同じものを引っ張ってきているので、一覧ページでの表示の際に細工をしないと難しそうですね。

こうなってくると、技術や知識もさることながら、アイディア勝負といった感じがするので、他の方がもっと良いアイディアを出してくれるかも知れませんが、そもそも一覧ページで画像が拡大表示されるのは、aタグのhrefプロパティで画像のURLを指定し、relプロパティでポップアップウィンドウ（colorbox）を使う為の指定がしてあるからですよね。もし、画像をクリックして記事ページに飛んで欲しいということであれば、このrelプロパティを持っているリンクタグのhrefプロパティを、記事のURLに書き換えればOKですよね。

書き換えるファイルは一覧表示用のレイアウトファイルになります。本来であれば「/app/webroot/themed/demo/view/blog/default/index.php」をいじりますが、デモテーマを利用されている場合、インストール直後はこの場所に入っていないと思います。以下の手順を踏めば、自動的に上記場所にコピーされ編集できるようになりますので、順番に実施してみてください。

１．管理画面にログインする。
２．画面右上のメニューの「プラグイン管理」をクリック。
３．プラグインの一覧表から「blog」（一番上かな？）を探し、一覧表の左側にある操作アイコンの「管理」をクリック。
４．ブログの一覧が出てくるので、処理を施したいブログを選び、先程と同様、操作アイコンの「管理」をクリック。
５．画面の一番上の方に色々とメニューがあるので、「ブログ管理メニュー」の中から「ブログ基本設定」をクリック。
６．今度は画面の一番下に「オプション」というのがあるので、クリックする。すると、項目がズラっと出てくる。
７．出てきた項目の中の下の方に「コンテンツテンプレート名」という部分がある。「default」になっていると思うので、その横の「編集する」をクリック。（設定を保存して編集画面へ飛んでもいいか？と聞かれるので、OKする。）
８．自動的にレイアウトファイルが生成され、編集できるようになるので、以下の通り編集を加える。

出てきたレイアウト編集画面に、PHPファイルの中身が表示されていると思います。（で、念のためこの内容を全部、メモ帳か何かにコピーして、あとで不具合が起きたら復旧できるようにしておてください。）

で、編集画面を見て、この中から

<?php $blog->postContent($post,true,true) ?>

という部分を探して下さい。（50行目付近かな）

そこを以下のように書き換えます。

	<?php 
	
	//あなたのサイトのURL（最後のスラッシュまで必要！）
	$yourSite = 'http://www.xxx.com/basercms/';
	
	//記事内容を取得
	$blogPostData = $blog->getPostContent($post,true,true);
	//aタグを検索対象とする。
	preg_match('/<a("[^"]*"|\'[^\']*\'|[^\'">])*>/',$blogPostData,$aTags);
	//ブログの名前取得
	$blogName = $post['BlogContent']['name'];
	//ブログの記事id取得
	$blogPostId = $post['BlogPost']['id'];
	//colorboxの対象になっている画像リンクを置き換える。
	foreach($aTags as $aTag){
		if(strpos($aTag, 'rel="colorbox"')){
			//置き換え実施。
			$blogPostData = preg_replace($aTag,'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData);
		}
	}
	//表示を行う。
	echo $blogPostData;
		
	?>

あなたのサイトのURLを記述する場所がありますので、書いておいて下さい。今回、スマートURLを利用しているという事ですが、もし何かの事情でOFFにする場合は、このURLの箇所の最後に「index.php/」というスラッシュまで付けたindex.phpという文字を足して下さい。

書き換えが終わったら、更新ボタンを押して下さい。これで作業は終わりです。いかがでしょうか？

フラット表示

前のトピック | 次のトピック

Re: 画像をクリックしてページ遷移する方法は？

キーワード検索