ホーム テクニック ワードプレス(WordPress)のスキルハックまとめ

ワードプレス(WordPress)のスキルハックまとめ

「エックスサーバー×ワードプレス」でサブドメインを作ると、サブディレクトリが新サイト(サブドメイン)へ飛んでしまう解決法

巷のリファレンスは以下の通りです。

この解決方法だと、本体サイトに既にコンテンツがあった場合、それも404になってしまうので、根本的な解決になっておらず困りました。
そこで得た以下の解決方法です。

解決方法1
そもそも既存のディレクトリ名をサブドメインに指定しない。
これが一番楽です。
ex) ○○○.com/xxx/ : abc.○○○.com/

解決方法2
既に開発に着手している場合などは、もう一度サブドメインを設定し直す。
Xserverには「WordPress簡単移行」という機能があるので、簡単に設定し直せます。
ex) ○○○.com/xxx/ : xxx.○○○.com/ → 簡単移行 → abc.○○○.com/

解決方法3
どうしてもサブドメインを変えたくない場合は、本体をリダイレクトさせます。
今回都合上、自分はこちらを行いました。

手順1
・タクソノミースラッグを別の名前に変えます。
(*ここの移行は慎重にやりましょう。場合によってはコンテンツ消えるので要注意!)
ex) ○○○.com/xxx/ → ○○○.com/zzz/

手順2
・本体サイトにプラグイン「Redirection」リダイレクションを入れます。(.htaccessリダイレクト記述でももちろん大丈夫です。)

手順3
・リダイレクションに対象のコンテンツURLを新しいタクソノミースラッグに301リダイレクトさせる(SEO)。
ex) ○○○.com/xxx/… → ○○○.com/zzz/…

手順4
・サブドメインで作った新サイトにもプラグイン「Redirection」リダイレクションを入れる。
サブドメインの方では、サブディレクトリトップのみ301リダイレクト(SEO)。
ex) ○○○.com/xxx/ → ○○○.com/zzz/

SEO問題なく反映を確認しました。
注意点としては、タクソノミースラッグを動かすので、本体サイトで再設定、場合によってはコーディングし直す必要があります。
開発をご自身がやられている場合は良いですが、運用担当者やライティング担当者の場合、またマネタイズへ直結する場合は、解決方法1、解決方法2をオススメします。

wordpressで特定の固定ページを挿入するショートコード

WPではCTAなど、使い回し更新が多いエレメントは、ショートコード化して貼ることをオススメします。
非エンジニアでも使いやすいので、覚えておくと便利ですし、運用が楽です。

特定の固定ページの本文を、URLで指定してショートコードで挿入する。

/* -----------------------------------------------------------------------------
functions.phpコピペ
-------------------------------------------------------------------------------- */
function page_content_include($atts) {
  extract(shortcode_atts(array(
    'slug' => 'default'
  ), $atts, 'custom_shortcode'));

  ob_start();
  $page_info = get_page_by_path( $slug );
  $page = get_post($page_info);
  ob_end_clean();

  return do_shortcode( $page->post_content );
  // return $page->post_content;
}
add_shortcode('custom_shortcode', 'page_content_include');
/* -----------------------------------------------------------------------------
投稿ページ、固定ページに記述の場合 ex url:https://kotowari.tech/○○○/
-------------------------------------------------------------------------------- */
[custom_shortcode slug='○○○']

WordPress(ワードプレス)でビルダーなどのプラグインを使って、レスポンシブで要素の順番を入れ替える方法

flexboxのorderを使う方法が主流ですが、ビルダー仕様によっては効かない場合があります。
その場合は、CSS Table displayを使用すると上手くいきます。
ただし、tfoot要素のような表示となるため、2カラムのテレコでの使い方に限定されてしまいます。

@media screen and (max-width: ○○○px) {
 .sp_column{
  display: table-footer-group;
}
}

sp_columnを該当のカラムへクラス指定するだけです。

WPプラグイン「Duplicate Post」で記事を複製可に!!

オススメのWordPressプラグイン。
「Duplicate Post」
記事も固定ページもカスタム投稿も複製可能です(WP内の設定も複製してくれるとこも優れてる)。
元データを残しつつ、PDCA回すにはとても頼りになります。

【徹底解説】WordPressのSEO対策「All in one SEO Pack」の設定と使い方

SEO対策の王道。
基本的な設定や、更新に必要な要素も全て網羅しています。
アナリティクスやSNSの設定もできるので、ローンチまでのスピードも早まります。
SEO初心者の方はこのプラグインを設定することで、SEOの全体像が理解できます。

SSL化で.htaccessにhttpからhttpsへリダイレクト設定して500エラー時に確認すること。

ワードプレスでうまくいかない時(トップページだけ)は、「.htaccess」の記述順だったりします。
サイト評価に直結するので、301リダイレクトを丁寧に設定しましょう。

ワードプレスで新しく追加されたプライバシーポリシーの設定方法を紹介

WordPress 4.9.6への更新により、新たに追加された機能「プライバシー設定」。
2018年5月25日発効のEU一般データ保護規則(GDPR)により、アナリティクス入れてるサイトは、プライバシーポリシーの設定が必須です。
すでに掲載の方も内容含め改めてチェック。

WordPressでブログを作るテーマ(外観)の設定

無料、有料と世界中の開発者が作った様々なテーマを使用することで、クオリティや機能を上げることができます。
一度構築すると後戻りしにくい部分もあるため、目的やイメージと合うものを選択。

WordPressでブログを作る Vol.5 テーマ(外観)の設定|ふるた【株式会社37Design...
前回はWordPressのインストールが完了しました。 ここまでくればブログを書くことができるのですが、ここで外観を少し見てみましょう。 URL(取得したドメイン)にアクセスすれば、現在公開中のページが見れるはずです。 「Hello world!」とでていますが...
note(ノート)
 
https://note.com/37design/n/nab3927897c8a

ワードプレス、カテゴリーの取得と出力一覧。WordPress(ワードプレス)

ワードプレスのカテゴリーの取得、コピペで使えます。

リンク付きカテゴリ
<!--?php the_category(); ?-->

リンク付きカテゴリ カンマ区切りなど指定の文字区切る場合
<!--?php the_category(', '); ?-->

概ねテーマに最初から含まれていると思いますが、自分でもコーディングしてみるとPHPの勉強になるのでやってみてください。
また、カテゴリからのリンク先のアーカイブページも合わせてチェック。
その他カテゴリーの取得一覧はこちら。

SyntaxHighlighter Evolved – 記事の中でソースコードを綺麗に表示できるWordPressプラグイン

ソースコードを綺麗に表示できるWordPressプラグイン。
「SyntaxHighlighter Evolved」実装はサクッとできて見た目も美しいです。カラーバリエーションも数種類あるので、サイトトーンを気にされている方でも対応。
テキスト編集画面で簡単にできるのと、言語対応の多さが魅力的です。

「WordPressのSNSシェアプラグインはどれがいいか、上位10件の徹底比較。」

簡単にURLをコピーしたり、各種SNSにストレスなくアップすることはサイトの露出を増やす有効なマーケティング方法です。
カスタム投稿や固定ページにポストしている、ブログ、実績、ポートフォリオ、ニュースなど、どんなページにも使用できます。
試しにウェブnoteのブログにも1位の「AddToAny Share Buttons」を導入してみましたが、1分くらいで記事の上下に入れることができました。
ポストしたら拡散するという基本的なものですが、最大化するには必要不可欠です。
ご自身の記事と相性の良い、SNSを選んで掲載ください。

超簡単です。エックスサーバーにお引越し「WordPress簡単移行」ツール。

最近GMOからエックスサーバーに変更するタイミングがあり使ってみたのですが、あまりに簡単&スムーズでした。
移転をお考えの方は、参考ください。

①旧サーバーでWordPressの一式バックアップ
②エックスサーバーでドメイン設定
③「WordPress簡単移行」ツールでエックスサーバーにお引越し
④ネームサーバーの変更
⑤お引越しの最終調整

注意点は
・SiteGuardプラグインは、移転時はオフらないとエラー
・SSLの調整で多少、サイトが見れない時間がある(自分の場合は30分以内)
・htaccessは、引き継がれない(必要な方は自分で更新)
・メアドの変更やWAF設定は別

レンタルサーバーおすすめNo.1

高速・高機能・高安定レンタルサーバー【エックスサーバー】

WordPress Ver5.3以降、メディアアップロード時の強制リサイズ「ファイル名-scaled」

WP最新バージョンアップ後に画像をアップしていたら、なぜだかファイルが長辺2560pxにリサイズされていて、おかしいなと思ったら「ファイル名-scaled」になっていました。
ワードプレスの仕様変更ということですので、大きなファイルを上げている方は注意が必要です。

解決方法は、functions.phpに以下を追記ください。
add_filter( 'big_image_size_threshold', '__return_false' );

- Advertisment -
20代のフリーター向けの就職支援サービス

最新記事

2021年最新のWebデザイン・UI/UXデザイン・グラフィックデザイントレンドまとめ

目次 【2021年版】UI/UXデザインの最新トレンド10選 2021年に流行るデザインの最新トレンド10選!グラフィックデザイン&Webデザイン 2021年のUI/UXデザインのトレンドとそれらをあなたのために機能させる方法 ついに出た!2021年注目のWebデザイン人気トレンド9個まとめ 2020-2021年に注目!Webサイトアニメーションの人気トレンド7個まとめ 2021年のWebデザイントレンドが分かる参考サイト7選 2021年WEBデザイントレンド予測 2021年に注目したいWebデザイントレンド 【2021年注目のデザイントレンド】シスコム予測 2021年最新のデザイントレンド 【海外】2021年注目のWebデザイントレンド予測6選 ユーザーをワクワクさせる、最新UI/UXデザイントレンド5選【2020–2021】 【2021年版】UI/UXデザインの最新トレンド10選 2021年のトレンドの一つは、複合要素の組み込み、組み合わせです。 3D、音声、カラー、フォントなどの各要素が紹介されています。 単純な旧Webデザイン(画像+コーディング)では差別化が難しく、Webデザイナーに求められるスキルは年々増えています。 1. ダークモード 2. 没入型3D 3. 手作り感のあるデザイン 4. 奥行きのあるデザイン 5. 写真×イラスト 6. 音声を使ったUI 7. 抽象的なデータの可視化 8. 太字のフォント 9. カジュアルな文体 10. 近未来的な色の組み合わせ 2021年に流行るデザインの最新トレンド10選!グラフィックデザイン&Webデザイン アートディレクター&デザイナーのシクさんのnote。 アメリカの記事を参考にまとめられていて、他とは違うテイストです。 特に復刻しているクラシック(レトロ)デザインが、世代が変わってきている印象を受けます。 1.シンプルな幾何学模様 2.シンプルなデータビジュアライズ 3.フラットなイラスト 4.3Dなイラスト 5.グレインテクスチャ 6.クラシカルなフォント 7.カラーレス/ダブルトーン 8.絵文字デザイン 9.メタリック 10.ボクセルアート 2021年のUI/UXデザインのトレンドとそれらをあなたのために機能させる方法 UXを主軸においてピックされています。 最近では、GoogleもUX関連のランキングシグナルを公式ブログで発表しています。 テクノロジーの体験価値は、向上の余地も大きいので、導入にどのくらいの力をさけるかで差が出る部分です。 #1 リモートおよび仮想のすべてのもの #2...

Webデザイン(UIUX)のスキルハックまとめ

目次 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた 2020年のUIUXトレンド 【決定版】効果的なCTAボタンのデザイン・テキスト・配置 カスタム404ページとは 見出しの装飾・デザイン一覧 100選!半分有料(デザインのひきだしに) ソシオメディアさんがまとめた、ヒューマンインターフェースガイドライン100(2020年2月現在) 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい 要素の順番を入れ替えられるflexboxのorderを活用しよう CSSを使って縁取り文字を表現する方法 (デザインサンプル付き) CSSレイアウト(レスポンシブデザイン)の考え方やパターンをまとめた「Every Layout」 一覧でみやすいCSSコピペサイト「See-SS」50個以上のデザインパーツ 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた 一通り知って実践できるレベルであれば、現役は問題なし。 これから目指す方も守備範囲を知る上で大切です。 1.デザイナーならこれは読むべきメディア 2.デザインギャラリーサイト 3.figmaの使い方 4.配色 5.配置 6.素材の使い方 7.フォント 8.画像サイト 9.UX 10.EC 2020年のUIUXトレンド 2020年のトレンドをサラっていきましょう。 5Gに向けての準備期間とも言えます。 ・カスタムグラフィック ・モーショングラフィック/エフェクト ・淡いグラデーション ・スピード重視 ・ページローダー ・プロダクトオーナー 5Gのブレイクスルーで、リッチでも爆速なサイト制作(ページの長さも影響する!?)。 動画実装前提で、爆速再生が求められる。 感覚的なグラフィックやインタラクション、また鮮明伝達の重要度が上がってCVRに影響。 デザイナーやエンジニアにとっては、細分化か、複数の技術スペックか迷うところ… 【決定版】効果的なCTAボタンのデザイン・テキスト・配置 効果的なCTAボタンのデザインでCVを上げることができます。 テキスト、配置、カラー、矢印、スペースなど、ちょっとした調整で大幅にクリック率やコンバージョン率が変化します。 基礎やトレンドを抑えつつ、ABテストを行うように。 カスタム404ページとは カスタム404ページの作成は済ませていますか。 UXの高いイケてる404を見ると、Webデザイナーのスキルを感じます。 引越しやURLの変更などを行うと大量の404が発生しますので、サチコを確認しながら対処をしっかりとしましょう。 404ページ内でも、戻れるように最低でもトップリンクと、ヘッダー、フッターはつけておいて欲しいところ。 見出しの装飾・デザイン一覧 100選!半分有料(デザインのひきだしに) デザイン系のyoutube展開、見やすくて流し見ると勉強になります。 web上でも見出しの装飾は悩みのポイントなので、h1、h2、h3…などのパターンとしてCSSデザインできると良いと思います。 オウンドメディア、ブログなどでは読み進めていくためのトリガーにもなっています(滞在時間の向上)。 個人的にはモチーフを入れるというのが、イメージも定着しそうでやってみたいなと思いました。 ソシオメディアさんがまとめた、ヒューマンインターフェースガイドライン100(2020年2月現在) 1. シンプルにする 2. 簡単にする 3. メンタルモデル(ユーザーが想像する利用モデル) 4. シグニファイア(その意味が一目でわかる) 5. マッピング(操作と結果の関連) 6. 一貫性 7. ユーザーの主導権 8. 直接操作 9....

SEO(検索エンジン最適化)のスキルハックまとめ

目次 コーポレートサイトのSEOグロースの仕方 2020年のSEOを考えるには2019年まとめ ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう! 人気ブログサービスMediumが検索トラフィック激減! ブランド構築に他社サービス依存は危険。 「WEBライティングの見出しをつける際の基本事項」 コーポレートサイトのSEOグロースの仕方 LIG × ペイジ 同業に思えるけど、ポディションとネームがあってなせるコラボ。 SEOもブランディングも新規以外の、ある程度の市場規模を狙っていくとなると、強みの分析になる。 法人の強みって初期段階では個人の強みで、ここの設計がCVR(顧客転換率)ってイメージです。 頭にパッと浮かぶ個人や法人、プロダクト…。 そこを目指さないと経営は厳しい。 2020年のSEOを考えるには2019年まとめ ・権威性が「非常に強い」 ・コンテンツにコストを投じていたか ・被リンク構築を圧倒的な質と量で行っていたか これを読むと、2019年から2020年にGoogleはどこに向かっていくのか方向性が掴めます。 ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう! 記事の書き方「目次」。 目次はつけてますか?または、検討してますか。 記事の長さや種類を考えた上でプラグインなどの導入を考えましょう。 h2要素に着目。 人気ブログサービスMediumが検索トラフィック激減! ブランド構築に他社サービス依存は危険。 これはどんなプラットホームにも起こりえること。 手数として色々やるのはありだけど、自社・個人管理の本丸を育てるのは大事なこと。 「WEBライティングの見出しをつける際の基本事項」 1.ターゲットが明確になっている 2.読むことによるメリットが記載されている 3.最新の情報であることを意識する 4.感情を刺激する h1タグ〜h3など階層構造をしっかりと意識して、表示させたいキーワード検索における1位を確認し、読み手、SEO(google検索)共に高評価、シェアが得られるように意識してライティングを行うことが大切です。 文章が長いか短いかの判断ではなく、タイトルに対しての必要な情報、回答が網羅されているかどうか、それは読み手の満足度、記事の滞在率の向上に影響します。 また記事の場合、流し読んでも満足感を得られるように、タイトルの装飾、直下の適切な画像など可能な限りUXを向上させて、可読を進めてもらうのもポイントです。

無料有料で使える役に立つWebツール

目次 CodePen(コードペン)HTML、CSS、JSのコードをWeb上で確認が出来るサービス 面倒な切り抜き作業が一瞬で終わる Remove Image Background SEOチェキ! 無料で使えるSEOツール text-shadowジェネレーター 質高すぎ!ベクター素材をフリーでダウンロードできるサイトまとめ。 無料で800種類以上のウェブフォントを使用できるサービス「Google Fonts」2019年-2020年トップ10 CodePen(コードペン)HTML、CSS、JSのコードをWeb上で確認が出来るサービス フロントエンド、Webデザイナーの方へ! コードペンを暇つぶしにひたすら見るとできる人になった気分になれる。 コードで絵を書くって楽しいよね。 面倒な切り抜き作業が一瞬で終わる Remove Image Background 切り抜きの決定版。 Photoshopなどで時間のかかる、背景の切り抜きが一瞬です。 結構エグイ精度ですよ。 SEOチェキ! 無料で使えるSEOツール ページのタイトルなどmetaタグ情報(h1)やインデックス数、簡易順位チェックやキーワード出現率... 細かい分析ではなくて、記事やページ作成したらまずURL入力してgoogleにちゃんと食わせているか確認要。 text-shadowジェネレーター CSS3で使うtext-shadowのジェネレーターです。 ざっくりとシャドウを作ってくれます。 質高すぎ!ベクター素材をフリーでダウンロードできるサイトまとめ。 LIGさんの殿堂入り記事。 ベクターデータを使ってサクッといい感じの画像を作れます。 デザイン制作が苦手な方でも簡単に作れるありがたいデータ。有料無料問わず規約はチェック。 無料で800種類以上のウェブフォントを使用できるサービス「Google Fonts」2019年-2020年トップ10 1:Roboto 2:Open Sans 3:Lato 4:Montserrat 5:Roboto Condensed 6:Source Sans Pro 7:Oswald 8:Raleway 9:Merriweather 10:Roboto Mono Web制作には欠かせない、Google Fonts。 ページビュー数をランキング形式で確認するアナリティクスがあるので、チェックしてみてください。 Analytics -...

オススメ作業系創作系BGMまとめ

目次 【日本語ラップmix】〜深夜に聞くCHILL RAP〜 Japanese chill rap. mixed by DJ Tatsuki 宇多田ヒカル - 30代はほどほど。(ダイジェスト映像) 朝のタバコが100倍美味しくなる日本語ラップmix Best of Hiroyuki Sawano Vol.1 | 澤野弘之の神曲&BGM集 (42:39) 深夜に聞きたい日本語ラップMIX...