備忘録

なんとなく暇なときにでも....

CakePHPのHtmlヘルパを使用した<a>タグ内にimg要素やdiv要素追加するには...

最近週末はcakephp3を使用して、Webページを作成しているのですが、それに伴ってHtml部分をcakephpのHtmlヘルパやFormヘルパを使ったり(使わなかったり)してます。

今日はその中でもHtmlヘルパでaタグの生成に使用するlink()についてです。

link()は

$this->Htm->link(
    string $title, 
    mixed $url = null, 
    array $options = array(), 
    string $message = false
);

//$title : リンクされる文字
//$url : リンク先のURLを出力するパラメーター
//$options : オプションのパラメーター(なくてもよし)
//$message : 表示されるメッセージ(なくてもよし)です。

のような関数になっています。

以下のような画像付きリンクにしたいときは

<a href="/hoge/foo">
    <img src="img.png" alt="">
</a>
<?php 
echo $this->Html->link(
    $this->Html->image('img.png'),
    array(
        'controller'=>'hoge',
        'action'=>'foo'
    ),
    array(
        'escape'=>false
    )
);
?>

の書けば生成することができますよね。

ここでポイントなのは第3引数であるオプションの'escape'=>false
これを指定してないと第1引数の$this->Html->image('img.png')生成したimgタグがエスケープされてしまい、文字列として表示されてしまいます。


と、ここまではググったらすぐにわかることなんですが、私が詰まってしまったのは、

divタグをaタグの中に入れたいときはどうすればよいのか...



ググってもあんまりパッとする日本語のソースを見つけることができませんでした。
諦めて普通のhtmlで書こうと思ったのですが、とりあえず英語でググってみるとそれっぽいソースをstack overflowで発見しました。

結論から言いますと、第1引数に含めればよいとのことでした。

<?php
echo $this->Html->link(
    $this->Html->image('img.png') . '<div id="hoge-class">hogehgoe</div>' ,
    array(
        'controller'=>'hoge',
        'action'=>'foo'
    ),
    array(
        'escape'=>false
    )
);
?>

のように第1引数にまとめて書いてしまえばOK。(ちなみにdivタグを生成するヘルパ関数もあります。)

<a href="/hoge/foo">
    <img src="img.png" alt="">
 <div class="hoge-class">hogehoge</div>
</a>

のように出力されるはずです。

link()についてある程度理解していれば、ちゃちゃっと解決できてしまう問題でした。



本日はここまで。

参考 qiita.com

stackoverflow.com