.post_excerpt { display: block; width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

カスタマイズ

簡単にホームページが作れてカスタマイズもしやすいため、WordPressで作られているサイトはたくさんあります。その分、攻撃の対象にもなりやすいという側面もあります。 そこで今回は、WordPressのセキュリティ対策として、総当たり攻撃を防ぐ5つの技を紹介します。...

WordPressはプログラムの知識がなくても、テンプレートやプラグインなどで自分の好きなようにサイトをカスタマイズすることができます。しかし、PHPを使ってWordPressのカスタマイズをできるようになると、さらに自分の思い通りのサイトを作ることができます。 そこで今回は、PHPを使ってカスタマイズするときにおすすめのエディターを3つご紹介します。 PHPでカスタマイズするときにおすすめのエディター? PHPで開発をする環境を作ろうとするときに、IDE(統合開発環境)を使う方法をお勧めされる場合があります。開発用のソフトというだけあって、開発に必要な機能が充実していますしかし、使用するPCによっては起動に時間がかかってしまうなどのデメリットがあります。 ちょっとWordPressのカスタマイズをしたいという場合は、テキストエディターなど使いたいと思ったときにすぐに使えるツールの方が便利ということもあります。テキストエディターでも、PHPの入力がしやすいように設定ができるものがあります。 サクラエディタ(Windows用) Windowsを使っているなら、「サクラエディタ」がおすすめです。歴史があるエディターなので、見た目はすこし古く感じるかもしれませんが、とても軽く使いやすいエディターです。設定をすれば、キーワードの強調表示や補完入力もできるので、コーディング中のスペリングミスを減らすことができます。 サクラエディタ CotEditor(Mac用) Macを使っている場合にお勧めのエディターといえば、「CotEditor」です。汎用的なテキストエディターですが、シンタックスの設定をすることで、コードを見やすくハイライトしてくれるので、かるくPHPを使ってカスタマイズをしたいという場合にもおすすめです。すでにインストール済みという方は、シンタックスの設定をPHPに変更して使ってみてください。 CotEditor NetBeans 最後は、テキストエディターではなく、Java、HTML5、PHP、C/C++ で開発を行う時に使われる統合開発環境「NetBeans」です。比較的立ち上がりも軽く使いやすい印象です。 初めてPHPを使うという場合、どうしても文法のミスなどエラーが発生してしまいがちです。しかし、NetBeansなどの総合開発環境についているデバッグ機能を使うことで、コーディングしながらどこにあるのか分かりやすく把握することができます。タグの閉じ忘れや、関数の引数の入力ミスなどうっかりやってしまいがちなエラーを教えてくれるので、初心者にはおすすめです。 NetBeans お気に入りのエディターを見つけてぜひPHPに挑戦を! 今回は、比較的軽く動作してくれ、使いやすい機能が集約しているエディターを3つご紹介しました。プログラムを勉強し始めた方にお勧めすることも多い使いやすいエディターです。 これらのエディターを使って、ぜひPHPを使ったカスタマイズにも挑戦してみてください!...

「Wordpressのショートコードが便利!基本の作り方」という記事で、ショートコードの追加の方法をご紹介通り、Wordpressでは、簡単に自分でショートコードを追加することができます。今回は、このショートコードの具体的な使い方についてご紹介します。 WordPressの投稿画面の「メディアの追加」から画像を追加してもいいのですが、すでにあるhtmlをワードプレスの記事にするときに、画像をテンプレートファイルにFTPでアップロードして、URLをテキストエディターなどの一括置換機能を使ってURLをショートコードを使ったURLに書き換えると、スピーディに記事を追加することができます。 また、テスト用のサイトから本番用に移行する予定があるときも、テンプレート用フォルダの同じ階層に画像をアップすれば、記事内のURLを書き換える必要がないので、画像URLをショートコードを使って作成しておくと、移行時に手間を減らすことができます。 テンプレート内の画像を使った記事の投稿の方法 テンプレートで使われている会社ロゴなど、テーマディレクトリに保存されている画像を記事の投稿で使いたい場合に便利なショートコードをご紹介します。 function内でWordpressの関数である「get_template_directory_uri」を使うことで、有効化されているテンプレートディレクトリのURIを取得することができます。 function shortcode_tp( $atts, $content = '' ) { return get_template_directory_uri().$content; } add_shortcode( 'tp',...

プラグインを使っていると、投稿記事の中に[〇〇]のように[]で囲ったテキストを入力して、問い合わせフォームなどを追加するということがあります。この[]で囲ったテキストはショートコードといいます。 このショートコードを使うと、テンプレートで使っているテンプレートタグや、functions.phpに書いたプログラムを投稿記事で使うことができるようになります。知っているとちょっと便利なので、ぜひ覚えておきましょう。 簡単なショートコードの作り方 ショートコードを使う場合は、テーマ内のfunctions.phpに記入します。一番簡単な、ただのテキストを出力するショートコードです。fuctions.phpの一番下に次のコードを追加します。 function hogehoge() {    return "テキストを表示します"; } add_shortcode('hoge', 'hogehoge'); これで、[hoge]といういショートコードを使うことができるようになりました。管理画面の投稿の編集画面で、[hoge]と入力し、プレビューを確認すると[hoge]と入力したところに、「テキストを表示します」と表示されます。 add_shortcode('hoge', 'hogehoge');という関数で、ショートコードを追加しています。かっこの中の一つ目の「hoge」は、投稿の編集画面に入力するコード、二つ目の「hogehoge」はfunctions.php内で実行する関数を入力します。 とても簡単なショートコードですが、サイト内で繰り返し使う文言で、将来的に変更になる可能性がなるものをショートコードにしておくと、後から一括で変更できて便利です。 テンプレートタグを投稿記事内で使うショートコード テンプレートの中で使うことができるテンプレートタグも、ショートコードで呼び出すことができます。functions.phpの一番下に次のコードを追加します。 function blogname_func() {    return get_bloginfo('name'); } add_shortcode('blogname', 'blogname_func'); そして、編集画面で[blogname]と入力すると、記事内にサイトのタイトルを表示することができます。 テーマのディレクトリのURIを取得して、テーマで使っている画像のURLを出力したりと便利に使うことができます。 おまけ:ちょっとしたプログラムを動かす phpが分かる場合は、ちょっとしたプログラムをfunctions.phpに書いて、結果をショートコードで出力することができます。 例えば、次のコードは、[countdate]というショートコードで、2020年7月24日まであと何日残っているかを出力するというものです。 function...

WordPressには多言語向けのテンプレートやプラグインもたくさん公開されています。サイト制作者としては、選択肢も増えてありがたいのですが、日本語の翻訳がいまいちだったり、変更したいというケースがあります。 今回は、そんな時に活躍する「Poedit」というソフトをご紹介します。   多言語向けの翻訳の仕組み 多言語向けテンプレートを開いてみると、日本語で表示されている部分には、次のように「__()」と「_e()」を使った関数が書かれています。   __( 'Previous Post', 'twentyseventeen' )   テンプレートに書かれた関数は、twentyseventeen-jaというファイルの翻訳ファイルをつかって、「'Previous Post'」を翻訳してくださいという意味になります。 -jaの部分は翻訳したい言語を表しています。今回は日本語なので-jaですが、翻訳したい言語によって変わります。「wp-content/languages/themes/twentyseventeen-ja.po」というファイルをテキストエディタなどで開いて確認すると、Previous Postの翻訳を確認することができます。   「wp-content/languages/themes/」というディレクトリを見てみると、wentyseventeen-ja.poとtwentyseventeen-ja.moの2種類のファイルがあるのがわかります。テキストエディタで開いてみると、「.po」の方は開くことができますが、「.mo」は文字化けしてしまい開くことができません。しかし、moファイルはpoファイルを使って作成した、WordPressが読み込むためのファイルです。   翻訳を修正するときは、poファイルを編集し、moファイルに変換をするという処理が必要になります。これを簡単にやってくれるのが「Poedit」です。   Poeditのインストール Poeditは次のURLからダウンロードすることができます。使っているパソコンのOSに応じてダウンロードします。   https://poedit.net/download     Poeditで翻訳ファイルを編集する Poeditで翻訳を修正してみましょう。Poeditを開き、起動画面で「翻訳を編集」を選択します。翻訳ファイルを選択するダイアログが表示されるので、修正したい翻訳が含まれているPoファイルを選択します。今回は「twentyseventeen-ja.po」に翻訳が入っているので、このファイルを選択します。 ...

WordPressには多言語向けのテンプレートやプラグインもたくさん公開されています。サイト制作者としては、選択肢も増えてありがたいのですが、日本語の翻訳がいまいちだったり、変更したいというケースがあります。 今回は、そんな時に活躍する「Poedit」というソフトをご紹介します。   多言語向けの翻訳の仕組み 多言語向けテンプレートを開いてみると、日本語で表示されている部分には、次のように「__()」と「_e()」を使った関数が書かれています。   __( 'Previous Post', 'twentyseventeen' )   テンプレートに書かれた関数は、twentyseventeen-jaというファイルの翻訳ファイルをつかって、「'Previous Post'」を翻訳してくださいという意味になります。 -jaの部分は翻訳したい言語を表しています。今回は日本語なので-jaですが、翻訳したい言語によって変わります。「wp-content/languages/themes/twentyseventeen-ja.po」というファイルをテキストエディタなどで開いて確認すると、Previous Postの翻訳を確認することができます。   「wp-content/languages/themes/」というディレクトリを見てみると、wentyseventeen-ja.poとtwentyseventeen-ja.moの2種類のファイルがあるのがわかります。テキストエディタで開いてみると、「.po」の方は開くことができますが、「.mo」は文字化けしてしまい開くことができません。しかし、moファイルはpoファイルを使って作成した、WordPressが読み込むためのファイルです。   翻訳を修正するときは、poファイルを編集し、moファイルに変換をするという処理が必要になります。これを簡単にやってくれるのが「Poedit」です。   Poeditのインストール Poeditは次のURLからダウンロードすることができます。使っているパソコンのOSに応じてダウンロードします。   https://poedit.net/download     Poeditで翻訳ファイルを編集する Poeditで翻訳を修正してみましょう。Poeditを開き、起動画面で「翻訳を編集」を選択します。翻訳ファイルを選択するダイアログが表示されるので、修正したい翻訳が含まれているPoファイルを選択します。今回は「twentyseventeen-ja.po」に翻訳が入っているので、このファイルを選択します。 ...

多くのサイトで利用されているWordPress。プラグインによるカスタマイズがしやすかったり、初心者でもサイトの編集がしやすかったりとメリットもたくさんあるのですが、利用者が多い分システムへの攻撃対象となりやすいのも事実です。 そこで今回は、WordPressで安心してサイトを運営できるように、セキュリティプラグイン「Wordfence Security」をご紹介します。 「Wordfence Security」とは? Wordfence Securityは、WordPressで運営されているサイトのファイヤーウォール、IPなどによるブロックなどの機能が含んだセキュリティのプラグインです。Wordfence Securityにはスキャンの機能があるので、現在運営しているサイトにマルウェアに感染している可能性があるサイトにもおすすめです。 有料版と無料版があり無料版は有料版よりも30日遅れてマルウェアの情報がアップデートされます。さらに、接続元の国を指定してアクセスを遮断したり、より高度なスパムコメントのフィルター機能を利用したり、WordPressのログインパスを2要素認証にしたりと、より強固な 「Wordfence Security」のインストール方法 ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Wordfence Security」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。 「Wordfence Security」の設定方法 Wordfence Securityを有効化すると、セキュリティの警告メールを送信するためのメールアドレスの登録とメーリングリストの登録、利用規約の同意を行います。 次に、プレミアムライセンスキーを入力する画面が表示されます。今回は無料会員で進めるので、「No Thanks」のリンクをクリックして次に進みます。 これで、初期設定は完了です。 「Wordfence...

Wordpressで固定ページを作成する際、投稿ページには必要だけど固定ページには必要ない!という表示項目がいくつかあると思います。特に「ページのタイトル」と「投稿日・更新日」は、固定ページには不要の場合が多いのではないでしょうか。今回は、シンプルでカスタマイズしやすく多くのサイトで使われているテーマSimplicityでの設定方法をご紹介します。 固定ページの投稿日、更新日を非表示にする 投稿日、更新日の表示/非表示は【外観】-【カスタマイズ】―【レイアウト(投稿・固定ページ)】で設定できますが ここで設定すると、投稿ページの投稿日・更新日も表示されなくなってしまい不便です。固定ページのみ投稿日・更新日を非表示にする場合は、スタイルシートstyle.cssに以下を追加します。 [html] #post-×× .post-meta { display: none; } [/html] post-××の××には投稿日・更新日を非表示にしたい固定ページのページIDを記入します。 固定ページのタイトルを非表示にする 固定ページを作成する際にタイトル欄を空欄にすればタイトルは表示されませんが、それでは管理上いろいろと不都合が生じます。スタイルシートstyle.cssを編集してタイトルを非表示にします。 すべての固定ページでタイトルを非表示にする スタイルシートstyle.cssに以下を追記する。 [html] .type-page h1, .type-page .post-meta{ display:none; } [/html] 上記のコードを追記した場合、メタ情報がすべて非表示になります。メタ情報を残したい場合は、以下のようにコードを書きます。 [html] .page .entry-title { ...

目次がある記事は読みやすい ウェブページを閲覧するときに、目次があるとどんなことが書いてあるか最初に把握しやすくなって読みやすいですよね。ワードプレスで作成したページでも、各ページに目次を設定してあることが多くあります。 しかし、目次を手作業で作成する場合、読みたいところに飛ぶことができるアンカーリンクを張る手間もかかりますし、タイトルを更新した場合に目次を編集し忘れるなど、管理が大変になってしまいます。 そこで今回は、そんな面倒な目次の作成を自動化してくれるプラグイン「Table of Contents Plus」をご紹介します。 「Table of Contents Plus」のインストール ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Table of Contents Plus」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。 これで「Table...

ワードプレスサイトの画像の差し替えどうしていますか? ワードプレスサイトの記事の中にある画像を後から差し替えたい場合どうしていますか?その画像が使われているのが1か所ぐらいなら、再度メディアをアップロードして、手動で差し替えるというのも可能かもしれません。しかし、複数の記事で使われている画像を差し替える場合、手動で差し替えを行うのは大変な作業です。また、記事によっては差し替え忘れが起こる可能性も。 そんな時に便利なプラグインが「Enable Media Replace」です。このプラグインを使えば、サイト内で使われている画像を一括で差し替えることができるようになります。 「Enable Media Replace」のインストール ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Enable Media Replace」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。     これで「Enable Media Replace」のインストールは完了です。 「Enable Media...

エディタだけ作成するページは物足りない? ワードプレスでサイトを作成するメリットのひとつが、ページを作成するエディタは見た目を確認しながら作成できるので、htmlの知識があまりなくてもページが作成できる点があります。しかし、もっとボタンに動きをつけたり、画像に動きをつけたりしたいという場合は、エディタだけでは対応しきれないこともあります。 htmlやJavaScriptの知識はあまりないけど、簡単にページに動きをつけたい。そんな希望を叶えてくれるプラグインが「Shortcodes Ultimate」です。 「Shortcodes Ultimate」のインストール ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Shortcodes Ultimate」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。     これで「Shortcodes Ultimate」のインストールは完了です。 「Shortcodes Ultimate」で使えるショートコード Shortcodes Ultimateでどんなショートコードが使えるかを確認するには、ワードプレスの管理画面で、[ショートコード]-[Available shortcodes]で確認することができます。     この一覧から、ページに設置したい動きを選択します。使い方の一例として、タブを設置してみます。タブをクリックすると、プレビューやショートコードの書き方など、使い方を詳しく確認することができます。     「Shortcodes Ultimate」の使い方 Shortcodes Ultimateをインストールし、有効化をすると、エディタの上部に[ショートコードの挿入]というボタンをクリックしいます。     表示された一覧の中から、追加したいショートコードを選択します。今回はタブを追加してみます。     表示された画面で、追加するショートコードのカスタマイズを行います。タブの場合は、最初に開いておくタブを選択し、コンテンツで表示する内容を編集することができます。この画面ではプレビューを表示しながら編集することができるので、コードの編集に慣れていなくても安心して作業を進めることができます。     ショートコードの編集が終わったら[ショートコードの挿入]をクリックしてエディタ画面に戻ります。ページを表示すると、記事にタブが表示されていることが確認できます。     「Shortcodes...

サイト内のリンク切れどうやってチェックしていますか? ワードプレスでサイトを作成するとき、関連ページなどリンクを貼ることはよくあります。しかし、リンク先のサイトが閉鎖されたり、ページが削除され、リンクが切れてしまう可能性もあります。サイトに貼られたリンクがリンク切ればかりだと、そのサイトを読む気もだんだんなくなってしまいますよね。 できればリンク切れのリンクはなくしておくようにするのがベスト。しかし、サイトのページが増えてしまうとリンク切れを一つ一つチェックをするのは大変です。 そこで、サイト内のリンク切れを一括でチェックしてくれるプラグイン「Broken Link Checker」をご紹介します。 「Broken Link Checker」ってなに? Broken Link Checkerを利用すれば、サイト内のリンク切れや表示できなくなってしまった画像を手軽にチェックすることができるプラグインです。手動でサイト内を巡回することなくリンク切れのちぇっくが可能なので、リンク切れのチェックを大幅に削減することができます。さらに、現在サイト内にどんなリンクが貼られているかも一覧でチェックすることができます。 「Broken Link Checker」のインストール ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Broken Link...

ワードプレスのテーマ「Simplicity」はシンプルで使いやすい ワードプレスの魅力の一つに、テンプレートを変えるとサイトの雰囲気ががらりと変わるという点があります。テンプレートも探してみるととてもたくさんあり、選ぶのに一苦労。そこで、今回は「Simplicity」というテーマをご紹介します。 「Simplicity」は、余計な装飾が省かれたシンプルなテーマです。余計な装飾がない分、後から自分でカスタマイズがしやすくなっています。スタイルシートが苦手という方も、スキン機能である程度手軽に外観を変更できる機能もあります。 Simplicityの特徴1.内部SEO施策がされている   Simplicityは同じ質のコンテンツなら検索エンジンで上位に表示されるよう複数の内部SEO施策がされています。タイトルや見出しなどに最適なHTML構造にしたり、パンくずリストでサイト構造を適切に伝えたりと、様々なSEO対策がされています。 Simplicityの特徴2.SNSで拡散されやすい仕組み おもしろい記事があればSNSで一気に拡散されるようになりました。SimplicityではメジャーなSNSの拡散用のボタンがデフォルトで設置されています。ウィジェットで任意の場所に手軽に追加をすることができます。     さらに、FacebookのOGPのタグやTwitterのCardsタグがデフォルトでソース内に挿入することができます。 Simplicityの特徴3.デバイスに合わせた4つのスタイル Simplicityは、パソコンとモバイルの両方に対応されています。さらに、それぞれ高解像度と低解像度の2種類ずつ用意されていて、サイトを訪問した人が見やすいスタイルで表示されるように工夫することができます。 訪問者のデバイスによって、広告や表示を工夫して、より見やすいサイトを構築することができます。 さらに、完全レスポンシブ機能も追加されており、完全なレスポンシブデザインでも使用することができます。 Simplicityの特徴4.広告用のウィジェットで簡単に収益化 Simplicityでは、サイト内に広告を表示させるためのウィジェットが用意されています。サイトに広告を設置して収益をあげたいという場合にもおすすめのテーマです。     Simplicityの特徴5.本文が読みやすいスタイル サイトの主役はやっぱり本文です。どんなにおしゃれなサイトでも、広告などでぐちゃぐちゃして本文が読みにくければ訪問者は読んでくれません。 Simplicityでは、本文カラムを大きくしたり、適度な大きさの画像がデフォルトで表示されたりと、本文が読みやすいようなスタイルになっています。 Simplicityで思い通りのサイトを 自分でカスタマイズをして思い通りのサイトを構築したいとい方には、とっても使いやすいワードプレスのテーマ「Simplicity」。公式サイトにはカスタマイズのTipsもたくさん公開されています。ぜひ使ってみてください。...

人気の記事を表示して他のページへ閲覧者を誘導したい! いろいろなサイトを見ていると、人気記事を表示しているサイトが多くあります。サイトに人気記事を表示することで、読者の目に興味がある記事が止まりやるくなり、サイトへの共感を高めて、サイト内の他の記事を読んでもらうことができるようになります。 そこで、今回はワードプレスで作成したサイトに人気の記事を表示することができるプラグインを「WordPress Popular Posts」をご紹介します。 「WordPress Popular Posts」ってなに? 「WordPress Popular Posts」は、ワードプレスで作成したサイトで、多く読まれている記事をランキング形式で表示することができるプラグインです。 このプラグインのうれしいところはなんといってもその柔軟さ。過去24時間や過去30日間など時間の範囲を指定できたり、どのカテゴリーに対してのランキングを作成するのかなどこまかいカスタマイズができる点です。 また、サイトのデザインに凝りたい人にはうれしいのが、独自のレイアウトを使用することができるので、サイトの雰囲気に合わせて表示をカスタマイズすることができることです。さらに、マルチウィジェットに対応しているので、ひとつのページ内に複数のウィジェットを設置することができるので、カテゴリランキングとサイト内のランキングを同時に表示するなんて使い方も可能です。 「WordPress Popular Posts」のインストール ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「WordPress Popular...

ワードプレスのバックアップ正しく実行していますか? ワードプレスでサイトを運用するときに、何らかの障害などに備えてバックアップをとっておくことは必須です。また、運用中の定期的なバックアップだけでなく、カスタマイズする前にも、すぐに元に戻せるようにバックアップを取ると安心してカスタマイズの作業が進められます。 ワードプレスのバックアップをする場合、テンプレートやプラグインなどサーバーに上がっているデータとデータベースのデータの2つを一緒にバックアップを取る必要があります。手動でバックアップをしようとすると、Webサーバーにアクセスし、データベースにアクセスし、それをセットにして…と手間がかかります。 そこで今回は、手軽にワードプレスで作成したサイトのバックアップが取れるプラグイン「BackWPup」をご紹介します。...