WordPressのパーマリンク(URLスラッグ)を英数字(記事ID)にする方法

WordPressのパーマリンク(URLスラッグ)を英数字(記事ID)にする方法

WordPressやプラグインのアップデート時にはカスタマイズは消えてしまう事があるので注意が必要です。

カスタマイズコードを記述
下記のコードを、子テーマのfunctions.phpに貼り付けてカスタマイズは完了です。

//URLスラッグの自動生成
function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
if ( preg_match( ‘/(%[0-9a-f]{2})+/’, $slug ) ) {
$slug = utf8_uri_encode( $post_type ) . ‘-‘ . $post_ID;
}
return $slug;
}
add_filter( ‘wp_unique_post_slug’, ‘auto_post_slug’, 10, 4 );
このカスタマイズによって、投稿や固定ページのタイトルが日本語の場合に、例えばpost-123のような記事IDを含めたURLスラッグが自動生成されるようになります。

WordPress 複製時にレビュー待ちではなく下書き保存にする

WordPressで記事を複製する際に、ステータスを「レビュー待ち」ではなく「下書き」に設定するには、使用している複製機能をカスタマイズする必要があります。多くの場合、複製機能はプラグインを通じて提供されます。以下では、一般的な「Duplicate Post」プラグインを使用する例を示しますが、他のプラグインを使用している場合も同様のアプローチが可能です。

手順 1: functions.phpにコードを追加
テーマエディターにアクセス:

WordPressダッシュボードから「外観」 > 「テーマエディター」に移動します。
functions.phpを開く:

右側のファイルリストからfunctions.phpを見つけてクリックします。
以下のコードを追加:

php
コードをコピーする
function set_duplicate_post_status_to_draft( $post_status, $post ) {
if ( $post_status === ‘pending’ ) {
$post_status = ‘draft’;
}
return $post_status;
}
add_filter( ‘wp_insert_post_data’, ‘set_duplicate_post_status_to_draft’, 10, 2 );

function customize_duplicate_post_status( $new_post_status, $post ) {
return ‘draft’;
}
add_filter( ‘duplicate_post_post_status’, ‘customize_duplicate_post_status’, 10, 2 );
手順 2: プラグインの設定確認
もし「Duplicate Post」プラグインを使用している場合は、プラグインの設定を確認して、ステータスが適切に設定されていることを確認します。

プラグインの設定にアクセス:

WordPressダッシュボードから「設定」 > 「Duplicate Post」に移動します。
設定の確認:

「複製後のステータス」が「下書き」に設定されていることを確認します。
手順 3: 機能をテスト
記事を複製:

投稿一覧から任意の記事を複製します。
ステータスの確認:

複製された記事のステータスが「下書き」となっていることを確認します。
このカスタマイズにより、記事を複製する際にデフォルトでステータスが「下書き」になるように設定されます。他の複製プラグインを使用している場合は、同様のフィルターフックを探してカスタマイズを行ってください。

超初心者向けWordPress投稿の基本

1.WordPressにログイン

2.WordPressにログインし新規投稿

3.WordPressをビジュアルタブに変更し記事を貼り付け

4.タイトルを入力

5.画像を無料素材からコピーして貼り付け、またはダウンロードして記事にドラッグしアップロード

6.イラストを選択し、鉛筆ボタンを選択

7.代替テキストとして画像名を入力 画像と意味があっていればOK

8.アイキャッチとカテゴリを選択

9.すぐに公開するを選択し日付を選択し公開

コンテンツセキュリティポリシーを.htccessで対応

.htccessに以下を追記

# コンテンツセキュリティポリシー

<IfModule mod_headers.c>

  Header always set Content-Security-Policy “default-src * ‘unsafe-eval’ ‘unsafe-inline’ gap://ready file:; style-src ‘self’ ‘unsafe-inline’; media-src *; img-src * ‘self’ filesystem: data: blob:;”

</IfModule>

WordPressの手動アップデート方法(WordPressの管理画面にログインできない場合も有効)

WordPressの手動アップデート方法(Wordpressの管理画面にログインできない場合も有効)

サーバのPHPのバージョンアップなどにより、Wordpressの管理画面にログイン出来なくなることがございます
そういった場合はWordpressを手動でアップデートすることで、PHPの最新バージョンにも対応出来ますので、Wordpressの管理画面に再度ログインできるようになります

1. バックアップの取得

アップグレードの前に、データベースとサーバ上のファイルのバックアップを取っておきます。

2. WordPressのダウンロード

アップグレードするバージョンのWordPressをダウンロードします。
最新のバージョン以外にアップグレードしたい場合、WordPressのリリースページからダウンロードしてください。

3. プラグインの無効化

管理画面からプラグインを全て無効化します。
アップグレード後に有効化に戻すので、元々有効化にしていたプラグインがわかるようにメモなどをしておいてください。

4. 現在のWordPressファイルを削除

以下のフォルダ・ファイル以外のWordPressファイルを削除します。

wp-content
wp-config.php
.htaccess

5. 新しいWordPressファイルをアップロード

2でダウンロードしておいた新しいWordPressのうち、以下のフォルダ・ファイル以外をアップロードします。

wp-content
wp-config-sample.php
アップロード後、wp-content内のlanguagesフォルダをアップロードします。

6. データベースのアップグレード

ファイルのアップロード後に/wp-adminにアクセスすると、データベースの更新が必要な場合はアップグレードが促されます。(アップグレードが不要な場合もあるようです。)
必要に応じてアップグレードを実行してください。

7. プラグインの有効化

最後に無効化したプラグインを有効化に戻せばアップグレード作業完了です。
 

【参考サイト】

WordPress のアップグレード – WordPress Codex 日本語版

google広告で7500円分の無料クーポン(プロモーションコード)

google広告で7500円分の無料クーポン(プロモーションコード)

だれでも、初めてアドワーズ広告を行う人ならこの7500円分の無料クーポンがもらえるんですが、先日私も人に頼まれて久々に無料クーポンをもらおうとネット上で検索するもどこにも出てきませんでした。

なので、アドワーズ新規申し込みのサポートに電話してみたのですが、その方の案内もネット上で「グーグルアドワーズ」や「google adwords」や「アドワーズ クーポン」などで検索してみてください、そうしたらgoogleアドワーズクーポン関係の広告が検索結果に出てくると思いますというお話でした。

しびれを切らして再度googleアドワーズ新規申し込みサポートに電話したら、今度は親切な方がお客様のメールアドレスを教えてくださいと言っていただき、私のメールアドレス宛にクーポンを取得できるホームページのアドレス(URL)を送っていただきました。

Googleアドワーズのサポートの方に聞いたら、地域によってアドワーズクーポンの広告が表示されない場所もあるようなことを言っていました。

googleアドワーズの無料クーポンがもらえるページを紹介します!

https://www.google.co.jp/adwords/?channel=ha-ef

まとめ
googleアドワーズは、数千円からはじめられるのに、使い方によっては大きな可能性を秘めています。

コピペで使えるwwwの有無、https統一する.htaccessの記述方法

コピペで使えるwwwの有無、https統一する.htaccessの記述方法

■.htaccessファイルの転送の記述
.htaccessファイルを使用するには、Apache HTTP Server(Webサーバー)でmod_rewriteモジュールが有効になっている必要がありますが、ほとんどのレンタルサーバーでデフォルトで使用できるようになっています。

■wwwの有無、httpsに統一出来るコピペで使える記述方法
ドメイン名を記述していないので、どのドメインで使う場合もコピペでOKです。

—————ここから————————-


RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

—————ここまで————————-

■記述内容の詳しい説明

URL書換と転送の記述は以下のようになっています。

RewriteCond %変数名 条件 [フラグ]
ewriteRule URL書換&転送の記述
RewriteCondに記述した条件に合致したとき、RewriteRuleに記述したURL書換と転送が実行されます。
RewriteCondを複数行記述すればAND条件となり、複数行にフラグ[OR]をつければOR条件となります。

1行目、7行目は、mod_rewriteモジュールが有効かどうか判定する条件式となっており、有効であることが間違いないのであればなくてもOKです。
2行目が、Rewrite機能を使用するのでオンに。
3~4行目が、wwwなしに統一、5~6行目が、httpsに統一する記述です。

■wwwあり・なしの部分
個別に簡単に説明すると、RewriteCondの「(.*)」とRewriteRuleの「%1」がポイントとなっています。
RewriteCondでカッコを使って一致した値は、RewriteRuleで変数%X(一致した順に連番)を利用して参照することができるため、この転送の記述で「https://www.mydomain.com/」は「https://mydomain.com/」のようにwwwなしに転送されます。

%{HTTP_HOST} … サーバーのホスト名が
^www\.(.*) … www.から始まる場合
[NC] … 大文字・小文字区別せず(これは無しでもよいかと)
https://%1%{REQUEST_URI} … httpsのURLへ転送
[R=301] … レスポンスコード「301」(恒久的に転送)
[L] … 直後に続くRewriteRuleを実行しない
なお、wwwありに統一する場合は、以下のように記述します。

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
http・httpsの部分
こちらは特にポイントとなるようなところはありません。

%{HTTPS} off … httpsでのアクセスではない場合
https://%{HTTP_HOST}%{REQUEST_URI} … httpsのURLへ転送
なお、https化が必須になってきている流れもありますので、httpに統一する場合は省略します。

Bootstrapを使ったレスポンシブデザイン

最近フロント寄りのプロジェクトを行うことが多くなり画面サイズ最適化、
いわゆるレスポンジブデザインについて調べることが多くなったので、どんな方法があってどう使えば良いのか整理したくなったのでまとめたいと思います。ほぼほぼメモ。

レスポンシブデザインに対応するには主に、
・HTMLのviewport
・CSSのmedia query
・Bootstrap
・JavaScript ほぼjQuery

その他にも色んな方法があるかと思うのですが、代表的なものはこんな感じだと思います。
上から簡単な例とともに見ていきたいと思います。

・HTMLのviewport
viewportというhtmlの機能を使ってスマホに対応させる方法。

hoge.css




コンテンツ



こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。
width=device-widthこの記述でスクリーンサイズに合わせてねってことになり、
例えば、width=width=500とすると画面幅500px用の表示になります。

initial-scale=1.0は初期表示する際の拡大率。

他にもオプションがあり、
user-scalable=no でピンチ操作を不可能にするオプションがあります。

・CSSのmedia query
cssで対応する方法。お手軽に使えて結構使う機会が多い。

hoge.html 少し紛らわしいところですが、
max-width 画面幅が500px以下はsp.cssを読み込み、
min-width 画面幅が1000px以上はpc.cssが読み込まれるという感じ。
これは余り使ったことがなくて、よく使うのは下記ような方法

hoge.css
@media screen and (min-width: 499px) {
/* 画面サイズ 499pxから適用 */
.content {color: #red;}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
/* 画面サイズ 500pxから999pxまで適用 */
.content {color: #green;}
}
@media screen and (min-width:1000px) {
/* 画面サイズ 1000px以上から適用 */
.content {color: #blue;}
}
こんな感じで切り替えたい画面幅で、好きなようにスタイルを適応させれるのが便利ですね。

・Bootstrap
おなじみの便利フレームワーク。twitter社が生みの親のフレームワークでHTMLのclassに指定の記述をするだけで、レスポンシブ出来てしまう優れもの。

できることが結構あるのですが、代表的な機能はグリッドシステムで、

指定方法 適用画面サイズ
col-lg-num 1024以上
col-md-num 992px以上、1200px未満
col-sm-num 768px以上、992px未満
col-xs-num 768px以下
表のサイズ定義で横幅を12分割し、コンテンツ幅をコントロールできる。

hoge.html

分割のみならず、class=’hidden-xs’でスマホサイズで非表示に、
逆にclass=’visible-xs’で隠していたのを表示することができる。

これがなかなか便利でpcだと長い文言を表示できるけど、スマホだと見づらいなんてときに切り替えができる。

基本情報
観覧履歴

例えば、タブのテキストが長くスマホだと2行になって見栄えが悪くなるときも、
そこをhidden-xsで消してしまえる。

まとめ
上記以外の方法では、jsで動的にサイズを変更するなどですかね。
モーダルの表示位置を中央にしたいときとかに使えますね。

あとは、そもそもそのデバイス専用サイト作って振り分けるなどの方法があるのですが、
あまり今後も使う機会がなさそうなので、省きます。

レスポンシブ対応とは?

レスポンシブ対応されていますか?
2016年5月からモバイルフレンドリーが強化されます。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。
これによって、よりスマホでのSEO対策にはレスポンシブ対応が必須となります。

この記事ではモバイルフレンドリーに対応するためのレスポンシブ対応の作り方をすべてご紹介したいと思います。

まず、レスポンシブ対応についてですが、モバイルでサイトを閲覧した場合、今まではPC用のページを表示していました。

しかし、これをひとつのファイルだけでアクセスしてきたデバイスの横幅によってそれぞれのページを表示させるというもので、最大のメリットとしては、ひとつのファイルで運用が可能な点です。

スマホに対応させるという点では、必ずしもレスポンシブ対応でなくてはならない訳ではありません。
スマホ用のページを用意してアクセスしてきたデバイスをjavascriptやhtaccessなどで振り分けて表示させる方法も考えられます。
しかし、この場合の更新にはPC用とスマホ用の作業が発生することになり、スマホ対応にはレスポンシブ対応が広く導入されています。

レスポンシブ対応は、ページの切り替えをCSSで行っており、導入するにはスマホ用のCSSと、必要でしたらタブレット用のCSSを用意する必要があります。

viewport(ビューポート)を設定する
レスポンシブ対応には必須の設定です。
ヘッダーにビューポートというメタタグを設定してページの横幅のサイズを指定してレンダリングします。主にアクセスしたデバイスの横幅に合わせるためにwidth=device-widthを指定します。



ビューポートではこの他に、user-scalable=yes(またはno)によってズームを許可する・しないなどの設定もできます。
ページのデザインや操作性などを考慮して指定しましょう。

cssでメディアクエリを指定する
メディアクエリとは、アクセスしてきたデバイスの横幅によって読み込むcssを変えるためのものです。これによってスマホでの表示を変えることができます。

また、モバイルフレンドリーはスマホに関するアップデートなので、タブレットまで必要無ければPCとスマホのみのブレイクポイントを指定します。
例:375px以下はスマホ用とする(この数字がブレイクポイントです)

ブレイクポイントは、主要なスマホサイズを横にした時などを考慮して決めて下さい。

iPhone 5s 320px x 568px
iPhone 6 375px x 667px
例えば以下の設定だと、横幅が375px以下はスマホ用、376pxから960pxまでがタブレット用、それ以上がPC用のcssを読み込む設定となります。

@media screen and (min-width:961px) {
/*pc用のcssを記述*/
}

@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet用のcssを記述*/
}

@media screen and (max-width:375px) {
/*スマホ用のcssを記述*/
}
レスポンシブ対応の作り方はビューポートとメディアクエリの2点で準備が整います。
後は、実際に表示してみてはみ出してしまった画像などの横幅をスマホ用cssで調整していきます。

あなたの対策ページはどのクエリタイプ?「Do-Know-Go」アシスト窓口で無料診断中!
スマホ表示の画像サイズを可変にする
レスポンシブ対応ではデバイスによってcssを振り分けるだけなので、画像は主に流用することになります。
実際にスマホ表示してみると画像がデバイスの横幅より大きい場合は、はみ出して横スクロールが出てしまいます。これを調整するためには、スマホ用のcssにデバイスの横幅サイズで可変する指定をします。

img {max-width:100%; width /***/:auto; /*IE8用ハック*/} /*画像サイズが横幅に合わせて可変します*/
これによってスマホで閲覧した時に画像がデバイスサイズに可変され、見やすくなります。
この他にも、横幅を指定しているクラスなどはスマホ用cssの方でautoなどにして調整しましょう。
※IE8で横幅だけがデバイスサイズになるバグに対してハックを追加しています。

デバイスによって画像を切り替えたい場合
場合によってはスマホでは表示させたくないコンテンツやPCとは別の画像を出したい時があります。
こういった場合は、アクセスしてきたデバイスによって表示・非表示を指定して調整します。

<div class=”sp_contents”><img src=”/img/example_01.gif”></div>
<div class=”pc_contents”><img src=”/img/example_02.gif”></div>

@media screen and (min-width:376px) {
.sp_contents {display:none;} /*横幅376px以上では表示しない*/
}

@media screen and (max-width:375px) {
.pc_contents {display:none;} /*横幅375px以下では表示しない*/
}

ただし、このdisplay:none;は多用しないようにしましょう。
なぜならcssで画像やコンテンツを非表示にしているだけで、実際には読み込んでいるため表示速度が落ちる可能性があるからです。

もし画像の表示・非表示を多用するのであれば、デバイスの横幅によって読み込む画像が差し替わるjQueryが数多くありますので、そちらを使ってみると良いでしょう。

メニューの切り替え
PCとスマホではグローバルメニューが異なる場合が多いかと思います。
このような場合も、cssの表示・非表示でデバイスごとに切り替え、タップするとプルダウンでメニューが表示されるjQueryが多く公開されていますので、使いやすいものを探してみてください。

レスポンシブ対応の作り方まとめ
レスポンシブ対応の作り方は今回のような手順で行えば、それほど難しいものではありません。ぜひ、対応してみてください。
さらに、Googleは以下のような理由からレスポンシブ対応を推奨しています。

コンテンツの管理がしやすい
リダイレクトの必要がない
クローラーの巡回が1度で済む
スマホでの順位を落とさないために、ユーザーの使いやすさも考慮したレスポンシブ対応でモバイルフレンドリーに対応していきましょう。

最後に、一度アナリティクスで訪問しているデバイスを確認してみてください。
もしスマホからのトラフィックが多く、重要なページにスマホ対応ラベルが付いていないページがあれば早めの対応をおすすめします。
(すでにレスポンシブ対応でモバイルフレンドリーに対応しているサイトは今回のアップデートには影響ありません)

レスポンシブ対応はもはや、SEO対策に欠かせない対策のひとつとなっています。
導入の際は、必ずバックアップをとってスマホ対応に備えましょう。