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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

4回答

1679閲覧

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

hakaioh

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

1クリップ

投稿2016/06/07 01:13

編集2016/06/07 03:19

###前提・実現したいこと
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>

と記述すると、

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/09 16:05

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

回答4

0

ベストアンサー

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

css

1blockquote{ 2padding: 20px; 3border: solid 5px #0ff; 4border-radius: 255px 15px 255px 15px/15px 255px 15px 255px; 5background-color: #EEFFFF; 6margin-top: 30px; 7margin-bottom: 30px; 8}

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

html

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

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

投稿2016/06/07 01:26

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hakaioh

2016/06/07 01:46

早速のご回答ありがとうございます。 初心者でよくわからないところがあるので教えていただければと思います。 本文に書くのはHTMLの記述だけだとしたら、 上のCSSの記述はどこに書いておけばよいのでしょうか?
maisumakun

2016/06/07 01:56

テーマをカスタマイズしている場合、テーマのstyle.cssに書き足してください。
hakaioh

2016/06/07 03:17

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

2016/06/07 04:20

HTMLタグの組み合わせは決まっている以上、勝手に「bluehogehoge」タグを作ることはできません。 区別のために「クラス」というものを使えまして、<blockquote class="bluehogehoge">...</blockquote>に対して、CSSで「.bluehogehoge{ ... }」のようにするとスタイルが当たります。
hakaioh

2016/06/07 12:45

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

0

bluehogehoge

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

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

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

1. functions.php に追記

php

1function shortcode_blockquote( $atts, $content = null ) { 2 $a = shortcode_atts( array( 3 'name' => '', 4 ), $atts ); 5 $html = null; 6 7 if ( isset( $content ) && ! empty( $content ) ) { 8 $html[] = '<blockquote class="saying saying--blue">'; 9 $html[] = '<p>' . wp_kses_post( trim( $content, '<br />' ) ) . '</p>'; 10 11 if ( isset( $a['name'] ) && ! empty( $a['name'] ) ) { 12 $html[] = sprintf( '<cite class="saying__name">%s</cite>', $a['name'] ); 13 } 14 15 $html[] = '</blockquote>'; 16 $html = implode( PHP_EOL, $html ); 17 } 18 19 return $html; 20} 21add_shortcode( 'bq', 'shortcode_blockquote' );

2. style.css に追記

css

1.saying { 2 border-radius: 255px 15px 255px 15px/15px 255px 15px 255px; 3 margin-bottom: 30px; 4 margin-top: 30px; 5 overflow: hidden; 6 padding: 20px; 7 position: relative; 8} 9.saying--blue { 10 background-color: #EEFFFF; 11 border: solid 5px #0ff; 12} 13.saying__name { 14 display: block; 15 text-align: right; 16}

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

html

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

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

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

おまけ

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

php

1$say_jobs = <<<HTML 2Your time is limited,<br /> 3so don’t waste it living someone else’s life. 4HTML; 5 6echo do_shortcode( '[bq name="Steve Jobs"]' . $say_jobs . '[/bq]' );

投稿2016/06/07 06:58

編集2016/06/07 07:12
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hakaioh

2016/06/07 12:34

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

0

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

php

1get_template_part('hogehoge');

で呼び出せます。

投稿2016/06/07 01:29

cotton88

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hakaioh

2016/06/07 01:51

早速のご回答ありがとうございます。 初心者でよくわからないところがあるので教えていただければと思います。 Macを使っているのですけど、先程のコードをどこに記述し、 「hogehoge.php」というファイル名で保存すればよいのでしょうか?
guest

0

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

PHP

1if( ! function_exists( 'insertBlockquote' ) ) { 2 function insertBlockquote( $text, $name ) { ?> 3<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;"> 4<?php echo esc_html( $name ); /* 本文 */ ?> 5<p style="text-align: right;"><?php echo esc_html( $text ); /* 人名 */ ?></p> 6</blockquote<?php 7 } 8} 9```テンプレートで下記のように呼べます。 10```PHP 11if( function_exists( 'insertBlockquote' ) ) { 12insertBlockquote( '本文', '人名' ); 13} 14```maisumakunさんの書かれているように、スタイルはCSSで指定するほうがすっきりしていいと思います。 15 16--- 17 18【【WordPress】初心者でもできる! 超簡単な『ユーザー定義関数』を設定してWordPressをもっと便利に使いこなす方法 - ONZE19[http://on-ze.com/archives/441](http://on-ze.com/archives/441) 20 21【WordPressで使うエスケープの関数について | memocarilog】 22[http://memocarilog.info/wordpress/theme-custom/5171](http://memocarilog.info/wordpress/theme-custom/5171)

投稿2016/06/07 02:07

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hakaioh

2016/06/07 03:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問