The post WordPress投稿内でコメントアウトが消える!?2つの対処法 first appeared on Fukuro Press.
]]>WordPressは本当に便利で使いやすいツールです。
でも所々「ここが不便だな~」っていう改善点はまだありますね。
その1つが投稿内のHTMLコメントが消える or できない問題
よさげなプラグインも探してみたんですが、全くありませんでした・・・
そこでプラグインを全く使わず、
WP投稿内のコメントアウトができない・消える問題への対処法を紹介します。
ここでいう コメントアウト は、HTML文章でのコメントアウトのことです。
例えばHTMLだと <!--
と -->
で囲めば、その内部を非表示にできます。
<!--
コメントにしたい文章とか単語とか
実際のページには表示されない
ソースを見て初めて確認できる
-->
↑こんな感じ
コメントアウトは実際のページだと見えないけれど、
HTMLソースを開けば確認できます。(ちなみに Chrome なら Ctrl + U で開ける)
ただし、
WordPressの場合だとこのコメントアウトができないんです。
例えば投稿内で テキストエディタ を開き、コメントアウトを使ったとしましょう。
この下の行をコメントアウトしたい
<!-- コメントアウトしたい文章... -->
↓実際の投稿編集ページの様子
そしてこの状態から、
「ビジュアル」タブを開いて ビジュアルエディタ に切り替え
そしてもう一度、テキストタブに切り替えてみます
↓すると・・・
コメントアウトが消えてる!
これが WordPress でコメントアウトできないという意味です。
この現象が起きる原因として考えられるのは・・・
・・・などなど
ちなみに自動補完は wpautop という機能で、
次記事で紹介したように完全に無効化もできます。
↑WPの自動補完機能 wpautop を無効化する手順
自分でHTMLを編集したり、どうしても残しておきたい内容がある・・・
そういう時にコメントアウトできないと少し困ります。
何かプラグインがあれば便利なんですが、残念ながらそういうのもありません。
でもプラグインを使わずとも、コメントアウトは残せます。
そのやり方とは次の2つ
まず1つめがコメントアウトを code タグで囲む方法
とりあえずコメントアウトさえできればいいなら、この方法が一番オススメです。
そのやり方はスゴク簡単
非表示にしたいところを、
次みたいに丸々 code タグで囲ってやればOKです。
<code>
<!-- コメントアウトしたい文章... -->
</code>
これでビジュアルエディタに切り替えても、コメントが残るはず
この後紹介する方法は少し上級者向けなので、
不慣れなことをしたくないなら、こっちの方法を使ってください。
2つめはコメント用のショートコードを作るという方法
こちらはビジュアルエディタ上でも
「あ、ここにコメントがある!」と分かるので、視覚的にも分かりやすいです。
ただし テーマ編集・スクリプト追加 が必要なので、少し上級者向け
もし PHP と聞いて「なにそれ?」という状態だったり、
全くのWordPress初心者なら、この方法は "絶対" に試さないでください。
最悪ブログ構成を壊すリスクもあるので・・・
もし大丈夫という方は次の手順を試してください。
まず今使ってるテーマの functions.php を開きます。
開き方はどんな方法でもOK。WordPress内で直接編集するなら、「テーマ」ー>「テーマエディター」から開くのが簡単ですね。
もしくはサーバーの WebFTP とか、FTPソフトを使って開いてもいいです。
そして functions.php を開いたら、その最後に次のスクリプトを追加
/// コメントアウト用ショートコードを登録
add_shortcode( 'comment', 'comment_shortcode' );
function comment_shortcode( $atts, $content = '' ){
$params = shortcode_atts( [
'hide' => 'yes'
], $atts );
if( $params['hide'] == 'no' ) {
/// hide="no" ならHTML上にコメント表示
return '<!--' . $content . '-->';
}
else {
/// HTML上にはコメント出力しない
return null;
}
}
これはもう丸々コピペすれば問題ありません。
あとは保存するだけで、コメントショートコードが利用できるようになります。
そしてショートコードの使い方ですが・・・
コメントアウトしたい部分を [comment]
~ [/comment]
で囲むだけです。
↓コメントショートコードの利用例
[comment]
コメントアウトしたい文章...
もちろん2行以上でもOK!
[/comment]
たったこれだけ
もし HTMLソース上にもコメント表示したい場合 は、
ショートコードに hide="no"
を設定してください。
[comment hide="no"]
コメントアウトしたい文章...
ソース上にも表示できる
[/comment]
デフォルトだと hide="yes"
なので、投稿内でのみコメントが残せます。
以上がコメントショートコードを使ったやり方。
もしショートコードをいちいち打つのが面倒くさい・・・
そういう人はクイックタグとして登録しとくと、もっと便利にできます。
登録方法は AddQuicktag というプラグインを使うのが楽です。
↓こういう感じで適当にクイックタグを登録すれば・・・
↓投稿画面から [comment] が挿入できるようになる
AddQuicktag を使ったことある人なら、おなじみの手順
すぐできるので、余計な手間を減らしたい人は是非お試しあれ
あとちなみに、このプラグインの使い方は次記事でも詳解しました。
もし AddQuicktag を使ったことない、という方はコチラの記事もご覧ください。
今紹介した方法を使えば、コメントアウトができます。
でもできれば、WP標準でそういう機能があると便利ですけどね・・・
もし WP開発者 or プラグイン開発者 の方がこの記事をご覧になっているなら、そういう機能を付けていただくとありがたいです。m(__)m
あと自分もプラグイン開発者の端くれなので、
もし気が向いたらそういうプラグインを作るかもしれません。(需要があれば)
以上、WordPressでコメントアウトする2つの方法でした。
The post WordPress投稿内でコメントアウトが消える!?2つの対処法 first appeared on Fukuro Press.
]]>The post WordPressでよく使うHTMLタグの役割と挿入方法【初心者向け】 first appeared on Fukuro Press.
]]>文章メインのサイトやブログの場合、ただ文章を書くのではなくHTMLタグを使って文章を適切に構造化すると読者にとって読みやすくなり、検索エンジンにとっても評価の高いページになります。
逆にいえばタグを適当に使ってしまうと読みにくい文章になり、検索エンジンからも評価されにくいページになってしまうということでもあるのです。
そこでここではWordPressで特によく使われるタグの意味と編集画面での挿入方法について初心者向けに解説します。
私たちがWordPressで書いている文章はただの文章ではなくHTMLというマークアップ言語で作られています。
その中で文章を構造的に表現するために使われるのが「タグ」で、基本的に次のように開始タグと終了タグで文章を囲って使用します。
<p>こんにちは</p>
この場合は「<p>」が開始タグで「</p>」が終了タグになり、その中の文章がpタグにより構造化されます。
ではなぜこのようにタグを使うかというと例えば次のような役割で文章に構造を持たせることができるからです。
挙げていけばキリがないですが、このように普通の文章では表現できないことを表現するために使われています。
そしてさらにタグを適切に使うことによって次のようなメリットもあります。
このようにタグを使うと読者にとって見やすいページになるだけでなく、検索順位に重要な検索エンジンからの評価も上がります。
逆にいえばタグを正しく使っていなければ見ずらいページになり、SEO的にも不利になってしまうという事です。もしあまり意識せずにタグを使っているならタグの使い方を見直した方が良いかもしれません。
タグの正しい使い方を解説する前にWordPressの投稿画面で文章にタグを挿入する方法を紹介します。タグを挿入する方法は次の2つです。
この2つの方法について順に解説します。
ビジュアルエディタは実際にブラウザで表示される見た目を視覚的に確認しながら記事を編集できるエディタのことです。
このエディタ内でタグを挿入するには編集画面で次の画像でオレンジ色の枠で囲った「ビジュアル」と書かれたタブを開きます。
そしてタグ付けしたい文章を選択し上の方にあるツールボタンを押すと文章の前後にタグが挿入されます。
例えば文字を強調するにはstrongタグが使われますが、文章を強調したい場合は次のように強調したい文章を選択して上のツールボタンの中からBと書かれたボタン(←このボタン)を押します。
すると選択した文章が次のように太字に変わります。
以上がビジュアルエディターでのタグの挿入方法です。
テキストエディタはタグを直接書けるモードのエディタのことです。
このエディタ内でタグを挿入するにはまず編集画面で次の画像でオレンジ色の枠で囲った「テキスト」と書かれたタブを開きます。
そしてビジュアルエディタの時と同じようにタグ付けしたい文章を選択して上の方にあるツールボタンの中からタグに対応するボタンを押せばタグが挿入されます。
例えば文章を選択してstrongタグを挿入するボタン(←このようなボタン)を押すと次のように文章がstrongタグで囲まれます。
ビジュアルエディタと違いボタンを使わなくても直接タグを手打ちして挿入することも可能なので、タグの細かい制御をしたい場合にテキストエディタは役に立つと思います。
WordPressでよく使われるタグは次の7つです。
これらのタグの挿入方法と正しい使い方について解説します。
記事を書くときに必ず使うのは見出しタグです。このタグには次のような役割があります。
このタグは読者に内容を分かりやすく伝えるだけでなく検索エンジンの結果にも一部表示されるので、見出しの下にある文章を要約した分かりやすくて簡潔な内容にする必要があります。
また見出しの重要さが高い順にh1、h2、h3、h4、h5、h6の6種類のタグがあります。
WordPressではタイトルが記事のトップで自動的にh1タグで囲まれるので、通常はh1タグを使うことはありません。また見出しの階層が深くなりすぎると見ずらくなるのでh5やh6タグはあまり使わない方が良いです。
ビジュアルエディタ上で見出しタグを挿入するには見出しにしたい文章を選択して次のように左のドロップダウンメニューを開きます。
この中の「見出し1」~「見出し6」がそれぞれh1~h6タグに対応しているのでこの中から文章に適切な見出しを選んでください。
見出しのスタイルはテーマによって様々ですが、simplicityというテーマではh1~h6タグは次のように表示されます。
文章の構造を表すのに一番重要なタグなので適当につけず、見出しの下にある文章の内容を適切に表す見出しにすると読者にとっても検索エンジンにとっても分かりやすくなります。
strongタグには次の役割があります。
strongタグを使うと次のように強調した文章やキーワードが太字で表示されるので重要だと読者に伝えることができます。
またただ見た目を太字にできるだけではなく、検索エンジンにこのキーワードは重要だと伝えることもできます。
ただしstrongタグで強調したからと言って劇的なSEO効果があるわけではないですが、検索エンジンに重要なキーワードを伝えることができるので使って損はありません。
テキストをstrongタグで強調するにはテキストエディタ上で次のように強調したいキーワードを囲むだけです。
<strong>強調したいキーワード</strong>
重要だと思うキーワードはこのタグを使って強調しましょう。
ulタグには次の役割があります。
ulタグは順序がないただのリストを作るためのタグで作られたリストは次のように複数の項目の横にドットがついた形で表示されます。
ただ左にドットがついて見やすくなるだけでなく検索エンジンにもこれがリストという構造を持っていると重要な点をはっきり伝えることができます。
ビジュアルエディタで番号なしリストを作るにはまずリスト項目を1行に1つずつ書いてそれらを全て選択し(①)、上のツールボタンからリストを作るボタンを押します(②)。
すると次の画像のように1行ずつに区切られたテキストがリストに変換されます。
リスト項目を新たに追加するには各項目の最後でエンターキーを押すと新しく項目を追加することができます。
逆に項目を消すには項目に表示されているテキストを全て消し、もう一度削除キーを押せば項目が削除されます。
olタグは次のような役割を持ちます。
リスト表示する点はulタグと同じですが、olタグを使ってリストを作った場合は次のように各項目の前に「1.」や「2.」のような番号が割り振られた番号つきのリストになります。
ulタグと似ていますがolタグは順序のある物事に対して使われるので、どちらを使ってもいいという訳ではなくしっかりと使い分けが必要です。
ビジュアルエディタで番号付きリストを作るにはまずリスト項目を1行について1つずつ書きそれらを全て選択し(①)、上のツールボタンからリストを作るボタンを押します(②)。
こうすると次の画像のように1行区切りのテキストが番号付きリストに変換されます。
リスト項目の追加や削除についてはolタグで作られるリストと操作方法は同じです。
tableタグは次のような役割があります。
このタグを使うことで例えば次のような表を記事中に表示することが可能です。
このような表はタグを1つ1つ打つことで作れますが、さすがに手入力で作るのは労力がかかりすぎるのでおすすめしません。
代わりにWordPressでは「Tiny MCE Advanced」というプラグインを導入することで編集画面のツールボタンから表が挿入できるのでそちらを使いましょう。
次の記事でその詳しい手順や挿入方法について解説してあります。
blockquoteタグは次のような役割を持ちます。
このタグは他サイトからの文章の引用だと伝えるために使われ、引用部分はマージンが空いたり、ダブルクォーテーションマーク('')などで囲まれたりして引用だと分かりやすく表示されます。次の画像はsimplicityというテーマでの引用の表示例です。
このblockquoteタグは文章を引用するときには絶対に使うべきタグです。
もし引用せずそのまま文章を書いた場合、パクリだと読者から疑われるだけでなく検索エンジンからも重複コンテンツだとみなされるのでペナルティを受けてしまう恐れがあります。
なので他サイトから文章を引用するときは必ずこのタグを使うように意識しましょう。
ビジュアルエディタで文章を引用するにはまず引用したい文章をコピペで貼り付け全選択し(①)、上のツールボタンから引用ボタンを押します(②)。
すると次のように文章がblockquoteタグで囲まれ、引用部分だと分かりやすく表示されます。
以上がblockquoteタグの挿入方法です。引用部分だと読者に伝え、検索エンジンに重複コンテンツでないことを示すために絶対必要なタグです。
aタグは使用頻度が高く、次の役割を持ちます。
リンクは他のページへの外部リンクや自分自身のページへの内部リンクを張るために使われるタグで、次のようにaタグを使って書かれます。
<a href="https://wordpress.org/">WordPress公式</a>
リンクしたときに飛ぶ先は「href="リンク先のURL"」のように指定し、aタグで囲まれた文章は「アンカーテキスト」と呼ばれています。
そしてブラウザ上では次のようにアンカーテキストに下線が引かれて表示されます。
このタグは自分のサイト内で他のページを見て欲しい場合や他のサイトを紹介したい場合によく使われるタグです。
WordPressでのリンクの貼り方は次の通りです。
まずビジュアルエディタ上でアンカーテキストにしたい単語や文章を選択し(①)、上のツールボタンの中からリンク作成ボタンを押します(②)。
ボタンを押すと次のようにURLを入力するスペースが出てくるのでそこにURLを入力し(①)、右のエンターキーのようなマークのボタンを押します(②)。
すると選択した文章が次のようにリンクに変換されます。
もしリンクを解除したい場合は編集画面でリンクをクリックしたときに表示されるメニューから解除ボタン(←このようなボタン)を押すと解除されます。
ここで紹介したWordPressでよく使うタグは次の7つです。
タグを正しく使うことによって読者にとって分かりやすいページになり、さらに検索エンジンも文章の構造を把握しやすくなるのでタグの役割を理解したうえで正しく文章をタグ付けしていきましょう。
以上ここではWordPressでよく使うタグの役割と挿入方法について解説しました。
The post WordPressでよく使うHTMLタグの役割と挿入方法【初心者向け】 first appeared on Fukuro Press.
]]>The post 記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法 first appeared on Fukuro Press.
]]>マークダウン記法とは・・・
HTMLの基本タグ(見出し、太字、リンク、etc…) を簡単な記号で置き換えたもの
タグ打ちをなくすことで記事更新にかかる時間を短縮することができます。
それで最近、マークダウン系でいいプラグインを見つけました。
ここではそのプラグインの導入とマークダウンの書き方について解説します。
例えばWordPressの投稿画面でタグを挿入する場合。
次の2つの方法があります。
ボタン操作する場合はキー入力をやめるから ムダな時間が生まれます。
あとタグを手打ちするのも、やっぱり時間の無駄です。
そこでマークダウン記法の出番
例えば見出しを定義する場合マークダウンでは・・
##見出し
・・と書きます。
これは次のような h2タグ を書いたのと同じです。
<h2>見出し</h2>
わざわざh2タグを打つ必要がないし、
ボタン操作も必要ないので手間と時間が省けて便利ですよね。
特にスマホのような画面が小さい端末だとマークダウン記法はこの上なく役に立ちます。
それから編集画面上の移動量を少なくできるから、PCユーザーにもメリットあり。
WordPressでマークダウン記法を利用できるプラグインは色々あります。
個人的には「JP Markdown」プラグインが超便利でオススメ
次に紹介するみたいに、マークダウンを扱うのに重宝してます。
ではまずインストール方法から。
メニューから「プラグイン」ー>「新規追加」からプラグイン名で検索。
すると ↓ こういうのが出てくるので、インストールしてみてください。
※ ダウンロードして使う場合は次URLからダウンロードも可。
https://ja.wordpress.org/plugins/jetpack-markdown/
インストールして有効化すると、
すぐに編集画面でマークダウンが使えるようになります。
↓ 例えば見出しをマークダウンから挿入するやり方
一部のタグでは編集画面でマークアップ入力するとタグに変換されます。
ただし太字や斜体字などのテキスト装飾タグだと、編集画面上ではタグに変換されません。
(おそらく修正しやすくするため・・・??)
ここからが肝心なところ
マークダウンで頻繁に使うタグの書きかたを紹介します。
これさえ覚えとけば、編集効率が何倍にもなるはず
見出しを定義する場合は文字列の前に #
を書きます。
#
の数によって次のように見出しの種類も変わるんです。
記法 | 対応するタグ |
---|---|
# | h1タグ |
## | h2タグ |
### | h3タグ |
#### | h4タグ |
##### | h5タグ |
###### | h6タグ |
見出しの大きさは最大6つまで定義可能。
HTMLのリストには 並列列挙型(ul)、順序型(ol)、定義型(dl)の3つがあります。
それぞれの作り方は以下の通り。
列挙型リストは文字列の前に *(アスタリスク) または -(ハイフン) を置くことで自動的にリスト項目が作成されます。
マークダウン例
* HTML
* CSS
* JavaScript
* PHP
表示結果
これは使いこなせるとカッコいいです。
アスタリスク(*)⇒⇒ ドット(・) に変換されるイメージ
項目の前に数字が振ってあるリストは項目の前に数字.(ドット)を置くことで作成できます。
マークダウン例
1. HTML
2. CSS
3. JavaScript
4. PHP
表示結果
「これって使う意味あるの??」
とか思ってしまいますが、タグ打ちの手間がなくなるので大ありです。
定義型リストはリスト項目の下にその説明が来るようなリストのこと。
マークダウンでは次の形式で定義できます。
リストアイテム
: アイテムの説明
マークダウン例
HTML
: Hyper Text Markup Language
CSS
: Cascading Style Sheets
JS
: JavsScript
PHP
: Hypertext Preprocessor
表示結果
実を言うと定義型リストなんて滅多に使わないです。
なのでムリに覚える必要はありません。
強調(em)や太字(strong)は次のように記述できます。
マークダウン例
*強調*
_強調_
**太字**
__太字__
表示結果
強調
強調
太字
太字
これは結構使うこと多いですね。
わざわざボタンを押さなくていいから楽です。
リンクは次のような書きかたで定義します。
[アンカーテキスト](URL "タイトルテキスト")
それぞれの意味は次を見てください。
ただし新規タブで開く設定( target="_blank"
)は、タグに記述する必要があります。
マークダウン例
[リンク](https://wordpress.org/ "WordPressの公式サイト")を開く
表示結果
これもWordPressに限らず、ブログを書くときはよく使うはずです。
引用はタグ打ちだと blockquote タグで作れます。
そのタグで表される引用は、マークダウンだと次のように定義します。
>引用テキスト
引用テキストを入力してエンターを押すと、自動的に引用タグに変換される感じ
マークダウン例
>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
表示結果
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
引用元を書くのは情報発信するときの最低限の義務
頻繁じゃないけどそこそこ使うから、覚えておくとグッド
マイナーだけどコード表示には codeタグ を使います。
それを表示したい場合は '
(シングルクォート) で文字列を囲みます。
マークダウン例
`#button{border: none;}`
表示結果
#button{border: none;}
まあ普通の人はあんまり使わないですが・・・
複数行のコードを表示するなら、
次のように記述することでコードのハイライトができます。
```[ハイライト言語クラス]
ソースコード ```
[ハイライト言語クラス]はプラグインなどで定義されているハイライト用のクラス名に置き換えてください。
例えばPrism.jsを使っていてCSSコードをハイライトしたい場合は language-css と書くとCSSとしてハイライトされます。
マークダウン例 (Prism.jsをインストールしている場合)
```language-css
#button
{
font-size: x-large;
border: none;
}
```
表示結果
#button
{
font-size: x-large;
border: none;
}
ちなみに Prism.js についてはコチラ
上記事で紹介したみたいに、色々な言語のハイライトができるプラグインです。
なんか後半は普通の人が使わないタグばかりだった・・・
最後にマークダウンについて一言。
使いこなせれば、記事の作成スピードアップ間違いなし!
記法を覚えるまでは少し大変かもですが、
一度習得してしまえば後はスラスラ~と書けるようになるはずです。
以上、WordPressでもマークダウンが使えるようにする手順でした。
The post 記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法 first appeared on Fukuro Press.
]]>