質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.35%

WordPressでいつでも呼び出せる関数を作りたい【装飾】

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,123

hakaioh

score 7

前提・実現したいこと

WordPressでいつでも呼び出せる関数を作りたいと思っています。

具体的には、文字囲いの装飾であるコード(下)を、
<div style="padding: 20px; border: solid 5px #0ff; border-radius: 255px 15px 255px 15px/15px 255px 15px 255px; background-color: #EEFFFF; margin-top: 30px; margin-bottom: 30px;">

本文
<p style="text-align: right;">人名</p>

</div>

![イメージ説明

↑こういうものです。

いつでもWordPressに呼び出して使えるようにしたいなと思っています。

しかし、毎回この長い記述をコピペして使うのだと面倒ですし、このコードの中の一つを変更したい場合、他の全ても1つずつ変更しなければならないので、それも面倒です。

何か上のコードをひとまとめにして作っておいて、それをいつでも呼び出せるようにする方法はあるのでしょうか?

発生している問題・エラーメッセージ

上記の通りです。

該当のソースコード

上記の通りです。

試したこと

「WordPress」「関数」などで、いくらか自分で検索してみましたが、どのようにしたらいいか見つかりませんでした。検索ワードが良くないのかもしれません。

補足情報(言語/FW/ツール等のバージョンなど)

先程のご回答にあったように、WordPressのStyle.cssの一番下に

bluehogehoge{
padding: 20px;
border: solid 5px #0ff;
border-radius: 255px 15px 255px 15px/15px 255px 15px 255px;
background-color: #EEFFFF;
margin-top: 30px;
margin-bottom: 30px;
}

として書き加えました。
先程の青いほげほげの装飾を使いたいので、「bluehogehoge」としました。

記事の編集画面で
<bluehogehoge>
本文
<p style="text-align: right;">人名</p>
</bluehogehoge>

と記述すると、

表示されたのがガタガタでした。。

これはどうして起きたのかとどうしたらうまく表示されるのかをお聞きしたいです。

↓こんな感じです。
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/06/10 01:05

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

    キャンセル

回答 4

checkベストアンサー

+2

WordPressのプログラム側で細工しなくても、CSSに書けば手間なくできます。

blockquote{
padding: 20px;
border: solid 5px #0ff;
border-radius: 255px 15px 255px 15px/15px 255px 15px 255px;
background-color: #EEFFFF;
margin-top: 30px;
margin-bottom: 30px;
}

本文に書くべきコードはこれだけで済みます。

<blockquote>
本文 
<p style="text-align: right;">人名</p>
</blockquote>

なお、引用のようでしたので、汎用のdivではなくblockquoteにしてみました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 12:17

    やってみました!
    うまくいきそうなところまで来ているのですけど、あと一歩のところで表示がうまくいきません。補足情報のところにあることを教えてください。お願いいたします!

    キャンセル

  • 2016/06/07 13:20

    HTMLタグの組み合わせは決まっている以上、勝手に「bluehogehoge」タグを作ることはできません。

    区別のために「クラス」というものを使えまして、<blockquote class="bluehogehoge">...</blockquote>に対して、CSSで「.bluehogehoge{ ... }」のようにするとスタイルが当たります。

    キャンセル

  • 2016/06/07 21:45

    ありがとうございます。まだまだ勉強不足なのですけど、初めて利用させていただいてそのレスポンスの速さに驚きました!またよろしくお願いいたします。

    キャンセル

+1

そのコードを「hogehoge.php」をいうファイル名で任意の場所に保存しておき、表示させたい箇所で、

get_template_part('hogehoge');

で呼び出せます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 10:51

    早速のご回答ありがとうございます。
    初心者でよくわからないところがあるので教えていただければと思います。

    Macを使っているのですけど、先程のコードをどこに記述し、
    「hogehoge.php」というファイル名で保存すればよいのでしょうか?

    キャンセル

+1

bluehogehoge

bluehogehoget という HTML タグは存在しません。独自に HTML タグを作りたいのであれば、Web Components などを利用することになります。または、JavaScritp でブラウザーが独自の HTML タグを解釈できるようにする必要があります。(HTML と CSS を再度見なおしていただくことをオススメします。)

ここからが本題です。私なりのアプローチを書いてみたいと思います。

フォーマットが決まっているのであれば、私の場合、ショートコードを利用するようにします。

 1. functions.php に追記

function shortcode_blockquote( $atts, $content = null ) {
    $a    = shortcode_atts( array(
        'name' => '',
    ), $atts );
    $html = null;

    if ( isset( $content ) && ! empty( $content ) ) {
        $html[] = '<blockquote class="saying saying--blue">';
        $html[] = '<p>' . wp_kses_post( trim( $content, '<br />' ) ) . '</p>';

        if ( isset( $a['name'] ) && ! empty( $a['name'] ) ) {
            $html[] = sprintf( '<cite class="saying__name">%s</cite>', $a['name'] );
        }

        $html[] = '</blockquote>';
        $html   = implode( PHP_EOL, $html );
    }

    return $html;
}
add_shortcode( 'bq', 'shortcode_blockquote' );

 2. style.css に追記

.saying {
    border-radius: 255px 15px 255px 15px/15px 255px 15px 255px;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow: hidden;
    padding: 20px;
    position: relative;
}
.saying--blue {
    background-color: #EEFFFF;
    border: solid 5px #0ff;
}
.saying__name {
    display: block;
    text-align: right;
}

 3. 投稿・固定ページの本文に記述

[bq name="Steve Jobs"]Your time is limited,
so don’t waste it living someone else’s life.[/bq]

 ショートコードを利用する際の注意事項

テーマにショートコード機能を追加した場合、テーマを他のテーマに変更した場合、記事中のショートコードはそのまま文字列として記事本文に出力されます。これを解消するために、余裕があるなら、プラグイン化した方がいいかもしれません。

 おまけ

ショートコードは、投稿や固定ページの本文ではなく、テーマファイル内でも利用できます。表示したい箇所に以下のように記述してみてください。

$say_jobs = <<<HTML
Your time is limited,<br />
so don’t waste it living someone else’s life.
HTML;

echo do_shortcode( '[bq name="Steve Jobs"]' . $say_jobs  . '[/bq]' );

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 21:34

    ご回答ありがとうございました。
    今の私にとって記述が少し複雑に思えますけど、丁寧にご解説してくださりありがとうございました!

    キャンセル

0

functions.php に下記を追加したら、

if( ! function_exists( 'insertBlockquote' ) ) {
    function insertBlockquote( $text, $name ) { ?>
<blockquote style="padding: 20px; border: solid 5px #0ff; border-radius: 255px 15px 255px 15px/15px 255px 15px 255px; background-color: #EEFFFF; margin-top: 30px; margin-bottom: 30px;">
<?php echo esc_html( $name ); /* 本文 */ ?>
<p style="text-align: right;"><?php echo esc_html( $text ); /* 人名 */ ?></p>
</blockquote<?php 
    }
}

テンプレートで下記のように呼べます。

if( function_exists( 'insertBlockquote' ) ) {
insertBlockquote( '本文', '人名' );
}

maisumakunさんの書かれているように、スタイルはCSSで指定するほうがすっきりしていいと思います。


【【WordPress】初心者でもできる! 超簡単な『ユーザー定義関数』を設定してWordPressをもっと便利に使いこなす方法 - ONZE】
http://on-ze.com/archives/441

【WordPressで使うエスケープの関数について | memocarilog】
http://memocarilog.info/wordpress/theme-custom/5171

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 12:21

    ありがとうございます。補足情報のところにある問題がよくわからないので、もしご教授いただけると幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る