ワードプレス | 北九州ホームページ制作｜ソルアライアンス株式会社

2019年3月11日

自動挿入されてしまう「Gutenberg用CSS」を削除する方法

新たに自動挿入されるGutenberg用CSS

wordpressで自動的に出力されるHTMLに対応したスタイルシートが挿入されるようになりました。
何者かというと、WordPress 5.x系以降から採用となった新エディタGutenbergのものです。

style.min.css

ソースを確認すると、このようなものが追加されています。

ソースを確認すると、このようなものが追加されています。

functions.phpの修正

テーマファイル内のfunctions.phpにコードを追加して、この機能を無効化をします。

 
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );
function remove_block_library_style() {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
}

終わりに

PageSpeed Insightsで引っかかるとどうしても対処したくなりますよね・・
これで１つすっきりです。

2018年12月7日2018年12月7日

wordpress5.0 リリースとGutenberg（エディター）

はじめに

wordpress5.0がついにやってきました。

今回は「大幅なアップデート」のため「すぐに更新せず、様子見」が少し必要です。

Gutenbergとは

wordpressのエディターの事です。

すみません、詳細は取り急ぎこちらをご確認ください。

今までとここが違ってくる

コンテンツの保存形式が変わる
既存コンテンツは変換される

つまり、今まで生成されていたコードが変換されて「思うような記述がされなくなる」、「しかも過去の記事もね」という事です。

ここが危険

上記で結論を出しましたが、「今まで機能していたものが無効になる可能性がある」という事です。

ですので、特にビジネス利用の方は「事前テストを行った上での更新」が大事です。

更新した場合は

クラシックエディタープラグインを導入すれば良さそうですが、まだSOLALLIANCEではテストを行ってませんので、確定情報ではありません。

終わりに

脆弱性を補うために最新バージョンのアップデートは大事ですが、未確認でどんどん行うと予期せぬハプニングが発生する場合があるので、気をつけたいですね。

2018年11月4日2018年11月4日

WordPress php7.2 Warning: count()の対処法

サーバーのphpのバージョンアップ

ここでは割愛しますが、サーバーも常にphpのバージョンをアップしていきます。
wordpressを利用していたら、これにきちんと追いついていかないとエラーが発生します。

今回のエラー

このようなエラーが吐き出されます

Warning: count(): Parameter must be an array or an object that implements Countable in …(ファイルパス)/wp-includes/post-template.php

対処法

該当のファイルを開く

今回はここ
Warning: count(): Parameter must be an array or an object that implements Countable in …(ファイルパス)/wp-includes/post-template.php

この箇所を・・

 
// If post password required and it doesn't match the cookie.
    if ( post_password_required( $post ) )
        return get_the_password_form( $post );
 
    if ( $page &gt; count( $pages ) ) // if the requested page doesn't exist
        $page = count( $pages ); // give them the highest numbered page that DOES exist

このように修正します。

 
// If post password required and it doesn't match the cookie.
    if ( post_password_required( $post ) )
        return get_the_password_form( $post );
    if ( ! empty( $pages ) ) {
    if ( $page > count( $pages ) ) // if the requested page doesn't exist
        $page = count( $pages ); // give them the highest numbered page that DOES exist
     
    } else {
        $page = 0;
    }

終わりに

急なエラーも焦らず、きちんとバックアップを取りながら進めましょう。

2018年10月25日

ワードプレスのセキュリティ対策：wp-config defline のランダム生成

はじめに

ワードプレスはとても便利ですが、セキュリティ面で少し不安が残ってしまうケースがあります。

先日はワードプレスのセキュリティ対策：パーミッションという記事を書きましたが、今回はconfigの設定の一部についてご紹介します。

wp-config.phpの修正

非常に簡単な事です。

下記画像部分に「ユニークキー」を当てる、という作業をします。

ユニークキーの自動生成

下記引用部分のURLにアクセスしてください。

これはwordpress.orgのapiで、シークレットキーの自動生成を行います。

こちらからアクセス

https://api.wordpress.org/secret-key/1.1/salt/

アクセスしたタイミングで自動生成されます。
（更新すると別のキーが生成されます）

自動生成したキーを貼り付け

上記で自動生成したキーを、config.phpに貼り付けて、サーバーにアップロードして完了です。

終わりに

その他諸々のワードプレスの情報はこちらからご確認ください。
ブログカテゴリ：ワードプレス

2018年9月17日2018年9月17日

all in one seo packでseoの対策をする

はじめに

ワードプレスはseoにも非常に有効なcmsの一つです。
世界的にも多く利用されていて、優秀なプラグインも多く存在しますが、ワードプレスのプラグインと言えば？と問われると、よく挙げられるプラグインの一つだと思います。

cmsならではの便利さもありますが、記事やページ毎にmetaを設定するのは一苦労です。

そこでこの「all in one seo pack」の登場です。

このプラグインでは、各ページの設定を細かく行いたい場合に非常に有効的です。

きちんとバージョンアップが行われ、脆弱性の心配が少ないのもメリットかと思います。

具体的な設定は「メタキーワード」や「メタディスクリプション」の簡単な設置、そしてカテゴリーページやタグなどをグーグルにインデックスするかの選択も簡単に行う事ができます。

公式ページ記載のできる事一覧

XML サイトマップサポート – Google や Bing や SEO関連にサイトマップを送信

画像 XML サイトマップは画像の SEO を改善するために、Google と Bing に提出しました

Google AMP (Accelerated Mobile Pages)に対応。

Google アナリティクスのサポート

カスタム投稿タイプのSEO対策をサポート

優れたカノニカルURL

添付ファイルのページを親の投稿にリダイレクトする

自動的に Google や Bing などの検索エンジンにサイトの変更を通知します。

内蔵のAPIので、他のプラグイン/テーマは、アクセスして機能を拡張することができます

WooCommerce を含む、電子商取引サイトのSEOの統合を提供する無料のプラグイン

ノンスセキュリティは All in One SEO Pack に組み込まれています。

Google やその他のサーチエンジンのために titles を自動で最適化します。

メタタグを自動的に生成

WordPress のブログに見られる典型的な重複コンテンツを回避

初心者のために、オプションを確認しなくても、すぐに動作します。ただインストールしてください。

高度なユーザーなら、すべてをSEOに最適化するために微調整をすることができます

任意のタイトルをオーバーライドして、任意の META description と必要な任意の META keywords を設定することができます。

他の多くのプラグインとの互換性

57の言語に翻訳されています

PHP 7と100%互換

ダウンロード

お使いのワードプレスへログインをし、プラグインの新規追加からダウンロードをします。

または下記よりダウンロードをします。
ダウンロードサイト引用
2007年から45,000,000回以上ダウンロードされたオリジナルの WORDPRESS SEO プラグイン。
WordPressサイトをSEO最適化するのにAll in One SEO Packを使ってください。
初心者にもやさしく、高度な設定や開発者向けAPIも揃っています。
all in one seo packのダウンロード

インストール

通常通り、ダウンロード後に有効化で完了です。

使い方

上記「公式ページ記載のできる事一覧」に色々と書いておりますが、各種設定以外の通常で使うシーンを使い方として掲載致します。

設定する画面

上記画像の通り、「投稿」や「ページ」を作成する画面の下部に存在します。

①スニペットのプレビュー

その名の通りプレビュー機能です。
検索結果の表示のされ方です。

②タイトル

ブログやページ作成時のタイトルをそのまま使わない場合に、ここで改めてタイトルを設定します。

③ディスクリプション

そのページの説明文です。
検索結果ではタイトルの下に表示される説明部分のところになります。

④キーワード（コンマ区切り）

そのページを特に表すキーワードの設定となります。
例えばこの記事であれば・・

ホームページ作成
ワードプレス
all in one seo pack
使い方

このような感じのキーワードを「,」カンマ区切りで入力します。

その他の設定

あまり使わないかもしれませんが、ここの設定はインデックスなどを「させない」設定です。
もしテストページや画像一枚だけを表示するような「seoに悪影響を及ぼす可能性のあるページ」を作成する場合などがあれば、使用するシーンが発生するかもしれません。

終わりに

割と手間のかかる設定ですが、投稿やページを作成する場合は、このように細かく設定をしておくと「人に優しい（わかりやすい）ページ」となります。
従ってグーグルにも評価されやすいものとなりますので、ぜひ設定をしていきましょう。

2018年9月1日2018年9月17日

ワードプレスのセキュリティ対策：パーミッション

はじめに

シェアナンバー１の便利なCMS「ワードプレス」

便利だけど、怖いのが「セキュリティの脆弱性を突いた、悪意のある改ざん」です。

セキュリティ対策は色々ありますが、今回は一番ベーシックな必須の設定「パーミッションの設定」の記事です。

cmsとは

コンテンツ管理システムは、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。

引用：https://ja.wikipedia.org/wiki/コンテンツ管理システム

パーミッションとは

ホームページを表示するためのデータをサーバーという所に保管します。

このサーバーにおいたホームページのデータ（ファイル）を誰がどのように触ったり見たりできるか、の設定となります。

ファイルパーミッション（file permission）とは、ファイルごとに定義された、読み出し・書込みなどのアクセスに対する許可情報。通常は、ファイルシステム内のファイルごとに、特定のユーザーやグループに対してアクセス権を設定する。これによって、ユーザーごとのファイルシステムの見え方に影響を与え、ファイルシステムに対する変更を制限する。

引用：https://ja.wikipedia.org/wiki/ファイルパーミッション

パーミッションの基礎

権限を下記のようなアルファベットや数字で表します。

Permission	読み取り	書き込み	実行
アルファベット	ｒ	ｗ	ｘ
ナンバー	４	２	１

デフォルトのパーミッション

サーバーにワードプレスのファイル群をアップロードした時は、このパーミッションがデフォルトのままに（サーバー環境によるが）なっています。

基本的に「自分で設定しないといけない最初のセキュリティ対策」と思ってください。

パーミッションの変更

それではパーミッションの変更作業に入ります。

.htaccess

「６０４」

よくある改ざん事例が、この.htaccessというファイルです。
主に転送設定や根幹ルールの設定を行います。
６０４が使えない場合は「６０６」。

wp-config.php

ワードプレスのデータベースのアクセス権が書かれたファイルとなります。

「４００」が推奨の値となります。

その他

ファイル

ファイルは「６０４」に変更。

ディレクトリ

ディレクトリ（フォルダ）は「７０５」に変更。

全てのファイルを変更するのは手間！

FileZillaだと「以下のディレクトリにもファイルやフォルダがある場合」、下記画像のように一括で修正可能です。

終わりに

以上で簡単なパーミッション推奨設定は終わりです。

他にも「ssl化」「プラグインで気をつける事」「テーマについて」「アップデートについて」「プレフィックスについて」「バックアップを取る」など、たくさんがりますが、また次の機会にご紹介します。

2018年8月30日2018年9月2日

conact form 7 とスプレッドシートで「メール取得データ管理をする」

はじめに

サンプル請求や資料請求、アンケートなど様々な情報を収集して管理したいケースが多々あるかと思います。
その時に役に立つのが「メールフォームとスプレッドシートとの連携」です。
いちいち人の手を介して転記しなくても、自動でエクセルに書かれていったらものすごく楽ですよね！

用意するもの

できれば「新規アカウント」のグーグルスプレッドシート
wordpress（は大前提）
contact form 7
CF7 Google Sheets Connector←これがキモ

それではセッティングをしていきましょう。

グーグルスプレッドシートの用意

まずはアカウントの作成
グーグルスプレッドシート

※アカウントはなるべく新規で取得ください。
ドライブ内すべての権限を渡す事になりますので、データをたくさん管理しているアカウントではない方が無難です。

↓ログインした状態

contact form 7

ダウンロード >> contact form 7

コンタクトフォームの設定方法は別の記事でお伝えします。

CF7 Google Sheets Connector

こちらもダウンロード >> CF7 Google Sheets Connector
↓ またはwordpress管理画面から検索

次いで設定に入りますが、グーグルのアクセスコードを求められます。

ゲットコードをクリックして、ログインします。

アクセスの許可を求められます

手順に従って進めると、このような完了画面になります。

最終設定

スプレッドシートとコンタクトフォームの最終設定です。

スプレッドシートの設定

シート名
タブ名
項目設定

今回はテストなのでシート名を「test_sheet」、タブ名を「sheet_01」、項目を「name、phone、age」にしてみました。

コンタクトフォームの設定

おなじみの画面にタブが追加されています。
ここに先ほど設定した「シート名」「タブ名」を入力します。

タイトルも今回はテストなので、関係のある「項目」だけ設定していきます。

送信の設定もお忘れなく

テスト送信

メールフォームから送信

それではテスト送信をしてみましょう♪

期待を込めて送信！

スプレッドシートを見てみる

一瞬で転記されてます。
感動ですね

終わりに

いかがだったでしょうか？

使い方はそれぞれ事業に会ったものを検討頂ければと思います。

資料請求、サンプル請求、お問い合わせ、予約、アンケート、日報、購入履歴・・・本当に色々なデータ取得〜検証や統計などに使えると思います。

2018年8月26日2018年9月2日

wpemojiSettingsを削除

wordpressのwpemojiSettingsって何？

ごめんなさい。
単純に絵文字が使えまっせ、という機能です。

wpemojiSettingsを削除する意味

ユーザーのスマホからwebアクセスをする数が増大し始めて、wordpress バージョン4.2から絵文字に対応するようになりました。

しかし、世の中のブログの大半はそこまで「交流型ブログ」までたどり着いてない気がします。
※中には素晴らしいコミュニケーションツールとして活用されているブログも存在します。

そこで割とソースを割いてしまう（下記画像参照）ものなので、できる限りソースを綺麗に書きたいソルアライアンスとしては、削除対象になってしまうのです・・・（ごめんなさい）

wpemojiSettingsを削除しよう

ここでまたfunction.phpの出番です。
ソースは下記。

 
function disable_emojis() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
     remove_action( 'wp_print_styles', 'print_emoji_styles' );
     remove_action( 'admin_print_styles', 'print_emoji_styles' );
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
     add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

はい、超すっきりですね。
とは言え、どうしてもプラグインは楽なので、このブログも多用してるので、あれこれとソースは多いのが現状ですが。。。

サーバーにアップロード

いつも通り、ご利用のFTPソフトで上記加筆をしたfunction.phpをアップロードして下さい。

まとめ

必須作業ではないですが、きちんと細かくワードプレスの仕様を見ていくという観点では、割と良い対策かもしれません。

少しでも綺麗なホームページ（ソース）をお客様にご提供していくよう、尽力致します

2018年8月26日2018年9月2日

Pタグの自動化をさせない

wordpressのfunction修正シリーズ第一弾
もはや常識？「ｐ」タグを自動挿入させない方法についての記事です。

なぜ「ｐ」タグを自動挿入させないのか？

ワードプレスのページや記事の投稿には「文字入力をすると勝手にｐタグをつけてくれる」という親切機能があります。
が、、、時にこれは、「ものすごく邪魔な時」があるのです・・・。

例えば画像にこの「ｐ」が入ってしまったり、「ul」でリストを書きたいのにこの中にも「ｐ」が出現したり・・。

具体的に言うと、「普通のHTMLの記述をしているつもりが、勝手にｐタグが入ることにより、思ったレイアウトにならない時があって困る」という感じです。

普通に文字だけでブログを書く程度だと、問題は特にないのですが、PCだけでなくスマホも対応したりとレイアウトにも気を使わないといけない昨今、割と使いにくい状況にもなるのです。

「ｐ」タグを消去する方法

ずばり簡単。
テーマフォルダにある「functions.php」に一手間加えるだけです。

 
add_action('init', function() {
remove_filter('the_excerpt', 'wpautop');
remove_filter('the_content', 'wpautop');
});
add_filter('tiny_mce_before_init', function($init) {
$init['wpautop'] = false;
$init['apply_source_formatting'] = ture;
return $init;
});

サーバーにアップロード

ご利用のFTPソフトで上記加筆をしたfunction.phpをアップロードして下さい。

エンドユーザーがブログ更新をするなら？

エンドユーザーがブログを更新する場合は、タグなんてあまり関係ないケースが多いので、シンプルなブログでしたら自動タグはありで問題ないと思います

お客様の利用シーンに応じて、カスタマイズすることが大前提になるかと思います。

ご利用は計画的に。

2018年8月26日2018年9月2日

コードのハイライトを作るプラグイン

コードのハイライトを作る

ホームページを作成する人なら良く見かける「コードの事例」にハイライトを当てて、ユーザーがコードを識別しやするためのワードプレスプラグインです。

↓このようなもの

 
<ul>
<li>メニュー１</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>

WP Code Highlight.jsの導入

今回は「WP Code Highlight.js」という超軽量プラグインを使った事例です。

まずは、ワードプレスのプラグインページより新規追加を行います。

WP Code Highlight.jsのインストール

CDNの設定

インストール〜有効化の後は各種設定に入ります

まず最初にCDNの項目を「Public CDN: cdnjs (highlights.org recommend)」と選択します

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
引用：wiki https://ja.wikipedia.org/wiki/コンテンツデリバリネットワーク

Public CDN: cdnjs (highlights.org recommend)を選択します。

背景色の設定

背景色を選択します。

https://highlightjs.org/static/demo/
こちらのサイトでカラーリングのデモが確認できます。

このブログではレインボーを使用しています。

コード挿入タイプの設定

従来のハイライト挿入の方法は下記のような記述になります。

 
<pre><code></code></pre>

が、、、「Enable [code]code content …[/code] support:」にチェックを入れておくと、タグを利用して挿入が楽になります。

チェックを入れて活用する場合の記述方法はこちら

[code lang=”言語指定”] code content … [/code]

終わりに

一般ユーザー様には、ほぼ関係のない記事になってしまいました。

なぜならこのwordpressカテゴリは、社内の教科書としての機能を重視したものだからです。

ホームページの運用ノウハウやマーケティングに関しては、別のカテゴリでご案内します