Highlighterの使い方ーWordPressプラグイン【初心者向け】WordPressの記事内でソースコードを表示させるとき、コピー&ペーストした際にエラーが出ることなどもあります。Highlighterの使い方について解説していきます。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。WordPressの記事内でソースコードを表示させるとき、ビジュアルエディタでそのまま入力すると記事として公開されたコードが見にくかったり、コピー&ペーストした際にエラーが出ることなどもあります。Highlighterの使い方について解説していきます。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター!!HTMLの参考サイトを見ていたんですけど、ソースコードがきれいに表示されているのってどうやってるんですか?田島悠介あぁ、それならプラグインを使うとできるよ。Highlighter」がいいかなぁ。Highlighterとはこのプラグインは、技術ブログなどソースコードを載せているサイトを運営している人に重宝しそうです。エディタなどで表示されているソースコードと同じようにWordPressの記事に表示させることができるのです。見やすくなりますので、ぜひ活用してみてください。以下では、その使い方を紹介しています。Highlighterは記事作成時にそのままエディタから使用することができます。メニューが最初から日本語化されています。記事作成のエディタが「ビジュアル」になっている場合は「テキスト」タブをクリックします。メニューボタンから「crayon」をクリックします。Highlighterのメニュー画面が表示されます。タイトル:コードの内容について任意でタイトルを付けることができます。プログラム言語:表示させるコードの種類を選択します。DefaultのままでもOKです。コード:表示したいソースコードを入力します。テーマ:記事内に挿入された際の表示デザインを複数の中から選ぶことができます。他にもフォントの種類やサイズ、ツールバーの表示形式なども詳細設定することが可能です。各項目を入力したら右上の「挿入」をクリックします。Highlighterを使用したソースコードが追加されました。エディタを「ビジュアル」に戻すとこのように表示されます。記事を公開すると設定に沿ってコードが表示されます。一度挿入したソースコードを編集する方法ビジュアルエディタから該当のソースコードの部分をクリックし、このメニューボタンをクリックします。Highlighterの編集画面が表示されます。訂正が終わったら「更新」ボタンを押します。Highlighterを使用したコードが表記されている場合、閲覧者は簡単にコードをコピペすることが可能です。ソースコード上にマウスを合わせると、上にメニューバーが表示されます。次にこのCopyボタンを押します。そのbox内のコードが全選択されました。Ctrl+cでコピー・Ctrl+vでペーストすることができます。(Macの場合はcommand+cでコピー・command+vでペーストになります)以上で解説は終わりです。大石ゆかりそうですね♪[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。【子テーマの使い方!】WordPressのテーマをカスタマイズする方法WordPressでおしゃれなサイトを作成しようと思ったら、元々入っているテーマでは不十分なことも多いでしょう。自分でカスタマイズしてオリジナルのテーマにしたい...WordPressWordPressで人気記事を表示できるプラグイン3選【初心者向け】いろんなサイトで人気記事を表示していますよね。WordPressでは、プラグインを使用して各記事の閲覧数からランキングを自動的に生成し人気記事をサイドバ...WordPressアンケート機能を作ろう!WP-Pollsの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を解説する記事になります。特化したWordPressのテーマとは[PR]飲食店や美容院、エステサロン、病院などのWebサイトを作ろうと考えている方向けにWordPressのおすすめテーマ(テンプレート)を紹介しています。ホッ...WordPressWordPressでアイキャッチ画像を設定する方法【初心者向け】Wordpressでは、記事1つ1つにサムネイル画像(アイキャッチ画像)を設定することができます。WordPressの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。Postsの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。Postsの使い方について解説していきます。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。田島メンター!!記事によって関連記事って表示されているサイトってありますよね。Posts」っていうプラグインを使うとできるよ。ブログなど記事の下部に関連記事を簡単に表示できるプラグインです。自分で表示させたい関連記事なども指定ができたり、デザインもカスタマイズできるので、初心者から上級者まで便利に使えるでしょう。どれくらいクリックされたかという統計情報も管理できるので、サイトの回遊率改善にもつながるはずです。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。Posts」という項目に移動することができます。基本的にデフォルトで設定されているものが推奨されていますが、一つずつ見ていきます。settings」しかないので、初心者でも簡単に設置できるはずです。settings」ですが、ここでは見出しと表示する記事数を設定します。settings」ですが、ここではデザインや表示する項目を設定します。基本、チェックボックスで選択すれば良いだけなので、難しいところはないでしょう。以下の画像のソースコードの部分は、自分でCSSをカスタマイズすることができます。関連記事の画像のサイズを変えたり、文字のサイズを変更することが可能です。PHPのコードで表示位置を変更したい場合は、下記のソースコードを直接記述しましょう。Postsは、誰でも気軽に関連記事を表示できる便利なプラグインです。関連記事を表示することでサイト内の回遊率も上がり、閲覧数も増えるので、ぜひ自分でも導入してみてください。今回の記事は以上です。自動で記事を紹介してくれるのはいいね。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。Lightの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。Lightの使い方を紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。TwitterやFacebookなどのソーシャルボタンを追加できるプラグインです。全部追加しようとすると、全てのボタンのソースコードを埋め込む必要があるので面倒ですが、この手間をプラグインだけで解決してくれます。ソーシャルボタンを設置することで、ソーシャルメディアからの流入が増えることもありますので、設置しておきましょう。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストール方法がわからない場合はWordPressのプラグインをインストールする方法をご覧ください。いうリンクが追加されます。この時点で投稿した記事などを表示してみてください。デフォルトの設定で、はてなブックマーク・Twitter・Facebookのソーシャルボタンが表示されています。デフォルトのままでも良いですが、表示するボタンを編集することも可能です。クリックし、プラグインの管理画面を開きましょう。一般設定画面で、表示するボタンを選びます。左側がサイトで表示されるボタンのリストです。追加するには、右側の機能一覧から、追加したいボタンをドラッグするだけです。削除したいときは×を押してください。追加したボタンは上部にタブが追加され、表示ボタンの形式を変更したり、アカウントと連携させたりできます。Styleのタブでは、ソーシャルボタンエリアのCSSをカスタマイズできます。CSSがわかる場合は、こちらから設定してください。設定が完了したら、「変更を保存」ボタンを押すと反映されます。今回の記事は以上です。プラグインではなく、自分でソーシャルボタンを追加する場合は、WordPressでソーシャルボタンを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。Pluginの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。Pluginの使い方を紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。Pluginは、投稿に関連する記事を自動的に表示してくれるプラグインです。関連性も自分で決められますし、投稿ページの下・サイドバーなど様々な位置に表示できます。ページ内での回遊性を高め、ページ滞在時間を長くする効果が期待できます。ブログ型のサイトを運営されている場合は、ぜひ導入したいプラグインの1つです。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。プラグインを有効化すると、ダッシュボード>設定>YARRPというリンクが追加されます。プラグインを有効化しただけでも、投稿の下部に関連記事が表示されます。Posts」と表示されることが多いです。このままではあまりよくないので設定していきましょう。細かい設定を行います。ダッシュボード>設定>YARRPをクリックし、プラグインの設定画面を開いてください。表示させたくない記事の設定ができます。関連記事に表示させたくないカテゴリーやタグがある場合は、チェックを入れておきましょう。次に、関連スコアを設定します。このスコアが高ければ高いほど、表示には関連性の高さが求められます。全体の記事が少ない場合は、スコアを1(最低限)にしておくと良いでしょう。関連記事を表示する部分のレイアウトも決めることができます。リスト表示でもいいですし、アイキャッチ画像がある場合はサムネイル画像のほうがクリック率が上がるかもしれません。タグで、文字色やhtmlなども設定できるので、自分のサイトに合わせたデザインにすることができます。設定が完了したら、設定画面の下にある「保存」ボタンをクリックしてください。保存ができたら、サイトの表示を確認してみましょう。カスタマイズした内容が反映されたことがわかりますね。最後に、表示箇所を設定してサイドバーに表示させてみます。関連記事をサイドバーに表示したい場合は、ウィジェットから追加します。設定が完了してからサイトを見ると、サイドバーに関連画像が表示されました。自分でも導入してみてください。今回の記事は以上です。合わせてご覧ください。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressRedirectionの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を紹介する記事です。サイトが移転した時や別のサイトに移動させたい時に便利なプラグイン、Redirectionの使い方について解説していきます。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。田島メンター、あるお客様がWordPressのサイトを移転したんですけど、移転先にリダイレクトさせたいんです。「Redirection」っていうプラグインでなんとかなりそうだね。WordPressのプラグイン「Redirection」を使用すると、指定したURLから他のURLへと転送を行うことができます。サイトが移転した時などに設定しておくと便利なプラグインです。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。有効化したら、左メニューの「ツール」→「リディレクション」を選択します。※Redirectionは日本語対応プラグインです。新しいリダイレクトを追加する際は下の「新しい転送ルールを追加」から行います。ソースURL:転送元のURLを入力します。ターゲットURL:転送先のURLを入力します。入力が完了したら下の「新しい転送ルールを追加」をクリックします。今回は「wp_test」という名前のサイトにリダイレクト用の記事を作成し、そこから転送先の「wp_test_2」というサイトに転送処理を行うように設定してみました。該当の記事をクリックします。転送先のページが自動で表示されました。一度作成したリダイレクトは、「ツール」→「リディレクション」の管理画面で一覧表示されます。メニューが表示されるので、そこから各種の処理を行うことができます。編集:項目のURLを再編集することができます。削除:設定したリダイレクトを削除します。無効化:リダイレクトを一時的に無効にします。メニューから「有効化」をクリックすることで元に戻ります。※リダイレクトを削除しても設定が戻らず、該当のページに転送されることがあります。その場合はブラウザのキャッシュをクリアすることで元の状態に戻すことができます。ステータスコードは初期では301に設定されていますが、管理画面の「編集」からこのアイコンをクリックすることで302か307に変更することができます。以上でRedirectionの使い方の解説は終わりです。設定も簡単ですので、今必要なくても覚えておくと便利でしょう。転送元と転送先を指定するだけでリダイレクトを作ってくれるんですね。サイトの移転以外にも更新記事を書いた場合だとか、活用できる場面がありそうだね。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。Yoast」について紹介していきます。便利な機能が多いので、一つ一つ見ていきましょう。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。Yoast」がいいかなぁ。Yoastの特徴としては、非常に高機能なのでたいていの設定はこれ一つでできるという点でしょう。他のSEOプラグインの設定をインポートもできるので、初心者の人でも簡単に設定できると思います。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。インストールし、有効化すると左側に「SEO」というメニューバーが表示されているはずです。Yoastで設定できる機能は以下の通りです。上から順に解説していきます。ここでは、メタタグの設定やその説明文のテンプレートを作成します。検索結果にも表示される部分になるので、誰が見てもわかるように入力しておきましょう。ホームページは、いわゆるトップページとなる部分のタイトルタグとその説明文を設定します。投稿記事ページ、カスタム投稿タイプ記事ページ、固定ページ、メディアのタイトルタグと説明文の設定が行えます。カテゴリーやタグ一覧ページ、「アーカイブ」では、投稿者ページや日付順で並んだアーカイブページのタイトルタグと説明文の設定を行います。記事が増えてくると、ここは自然と増えてくるので最初に設定しておくことを勧めます。ソーシャルでは、FacebookやTwitterといったソーシャルメディアの専用のメタタグを設定できます。それぞれのソーシャルメディアでシェアされた時に、画像付きでシェアすることができる機能なので、ぜひ設定しておきましょう。トップページがシェアされた時の画像や説明文を設定したり、シェアされている投稿に画像が含まれていない場合に、表示する画像を設定できます。TwitterカードのタイプをSummaryか画像付きのSummaryから選択することができます。XML形式のサイトマップを出力することができ、詳細の設定などを行っていきます。別のプラグインでサイトマップを用意している場合などに応じてここでのサイトマップ機能を無効にすることもできます。サイトマップに含めたくない投稿タイプやカテゴリーなどがある場合は、「投稿タイプ」や「タクソノミー」で設定できます。設定したらXMLサイトマップというボタンで確認してみましょう。ここでは、パンくずリストを有効にしたり、「パーマリンク」でURLを変更するなどを行います。独自のURLにアクセスさせたいなど細かい設定はここで行いましょう。他のプラグインをインポートしたり、投稿や固定ページの説明文などを一括で変更したりと便利な機能が内蔵されています。基本的に利用する機能は無いと思いますが、他のプラグインには無い便利なツールもあるので、ぜひ見ておきましょう。Consoleの情報を取得することができます。今回の記事は以上です。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。Cleanerの使い方ーWordPressプラグイン【初心者向け】WordPressは、HTMLで作成した普通のサイトと比較して表示速度が遅くなってしまいがちです。サイトの表示速度が遅くなると、せっかくアクセスがあっても、表示される前にユーザーが諦めて離脱してしまいかねません。Cleanerの使い方を紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。遅いっていうだけならいくつか方法があるけど・・・そうだな。Cleaner」で最適化してみようか。Cleanerは、ブラウザとWebサーバのやり取りの回数やデータ量を減らすことで表示速度を上げることができるプラグインです。このプラグインを導入すると、タグを最適化してスッキリさせることができます。WordPressを使うと、初心者でも簡単にWebサイトを構築ができますが、一方でHTML、CSS、JavaScriptのソースが複雑になってしまいがちです。Cleaner公式サイトからダウンロードすることも可能です。インストール方法がわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。インストールができたら、プラグインを有効化しましょう。Cleanerが表示されます。ここから設定が可能です。管理画面を開いてみましょう。全て日本語なので、操作はわかりやすいです。サーバ上にキャッシュする」にチェックを入れてください。すると、さらに項目が増えます。続いで、この画像に合わせて、チェックを入れてください。ソースを最低限まで単純化し、サイトの表示速度を向上させるための設定ができます。WordPressのサイトでは、JavaScriptやCSSなどを更新した時にキャッシュが作られるくらいなので、あまり頻繁にファイルは貯まりませんが、導入しているプラグインによっては、JavaScriptやCSSを出力するものもあるので定期的に古いものを削除することをおすすめします。Cleanerの管理画面を開き、下にある「キャッシュを削除」をクリックしましょう。まれに「キャッシュファイル削除」だけだと古いファイルが残ってしまう場合もあるため、定期的にFTPソフトをひらいて、キャッシュファイルを削除することもおすすめします。キャッシュファイルは、WordPressフォルダの中の、wp-content>cache>head-cleanerにあります。Cleanerの使い方は以上です。Cacheの使い方も合わせてご覧ください。JavascriptやCSSを整理することでサーバーとのやり取りに使う時間が減るから、その分表示速度が上がったんだね。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。CORPORATION.。