備忘録&雑記

WordPresを設置して、テンプレートを自作してみました。

完成ページはこのブログです。

ソースコードは以下で公開しております。

https://github.com/naon56/wptemplate/tree/gh-pages/wp-test

HTML、CSS、PHP、WordPressともに初心者ではないので、ざっくりとした説明ですみません……。その他参考にさせていただいたサイトは参考にまとめてあります。

そのうち、ちゃんとイチから作成したバージョンを紹介したいです(希望)。

※随時更新



広告



WordPressの設置

WordPressのプラグインは、管理画面内のプラグイン検索ではなく、以下のサイトで検索してダウンロードしたものをアップロードして使用しました。管理画面内の検索では時間がかかるためです。

プラグイン

WordPressの初期設定は以下のサイトを参考にしました。

WordPressを初導入したら まず最初にやるべき24の設定

WordPressの設定で最初にやること

【WordPress】投稿記事を自動保存するリビジョン機能を停止する方法

使用するプラグインは以下のページを参考にしました。ただ、最新のWordPressでは動作しないものもあります。

ブログ運営の参考に!Naifixで愛用しているWordPressプラグイン31個

WordPressのおすすめプラグインは8つだけ。断言します

プラグインは20を超えないようにしています。プラグインをインストールした時に別のプラグインに悪影響を及ぼすことが多々ありましたので。

記事は以前Livedoorブログで書いていた内容をインポートしました。

ライブドアブログからWordPressへの移行(引越し)全ステップを解説

サイトマップは以下を参考にして「PS Auto Sitemap」を選びました。

WordPressのHTMLサイトマップを自動生成するプラグイン6選

パンくずリストは以下を参考に「Breadcrumb NavXT」を選びました。

Breadcrumb NavXTプラグインの使い方

【SEO対策にもなる!】WordPressでパンくずリストを表示できるプラグイン3選

アクセス解析は以下のサイトの「2.WordPressにGoogle Search Console(ウェブマスターツール)を設置する」までを実施しました。

WordPressに必要なアクセス解析を15分で設置しよう

外部SNS連携は以下を参考に「Jetpack(WPプラグイン)」を選びました。

『WordPress×SNS』自動投稿ツールまとめ

テンプレートの自作

まず、以下のページで、全体の流れを把握しました。

WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと

私はローカルに環境を作成せず、レンタルサーバーでいきなり実行しました。

以下のサイトで、テンプレートの作成方法を勉強しました。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

phpの構文チェックは以下のサイトを使用しました。

PHPコードの構文チェック

CSSは以下のリファレンスを使用しました。

CSSリファレンス

フッターのカスタマイズは以下を参考にしました。

WordPress フッターメニューの作成と追加

フッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法

【WordPress】任意のテンプレートパーツを読み込む関数[get_template_part() ;]の使い方。

WordPressサイトのフッターにウィジェットを追加する

トップに戻るボタンは以下を参考にしました。

WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方

SNSボタンの設置は以下を参考にしました。

コピペで使える固定ソーシャルボタンBOX

テンプレートの翻訳は以下のページを参考にしました。

自作WordPressテーマの国際化(翻訳)の方法

以下を参考に、「Multi Device Switcher」を使って、デバイスごとにテーマを作成することにしました。

スマホでPC表示が可能に!デバイスごとにテーマを切り替えれるWordPressプラグイン「Multi Device Switcher」

フィーチャーフォンとスマートフォンのサイトの作り方は以下を参考にしました。

WordPressを複数インストールし、携帯サイト・スマートフォン用サイトを個別に作成する方法

スマートフォンとタブレットのナビゲーションバーの表示は以下のサイトを参考にしました。

[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

プラグインは使わずスマホのメニューに実装 jQuery 水平スライドメニュー

スマホとタブレットとゲーム機の表示確認は以下を参考にChromeと実機(iPhone、iPad mini、ニンテンドー3DS)を使いました。

スマホのブラウザチェックはChromeのツールが便利

フィーチャーフォンは以下のサイトで確認しました。

サイトビューワ – gooモバイル

不明な単語はその都度Google先生で検索しました。最後にTheme Check プラグインでチェックしました。



広告



参考

WordPressのアクションフックの種類と実行順

WordPressで問い合わせフォームを設置する方法【初心者向け】

WordPress:WordPressで固定ページの表示順を変更する

QRのススメ

WordPressでソーシャルボタンを追加する方法【初心者向け】

Twitter Apps

ストリング翻訳が表示されない理由は何ですか?

WordPress と Facebook を効果的に連携させるための4つの方法

【プログラミング不要】WordPressとFacebookを連携して自動投稿する方法【ifttt】

WordPressとFaceBook、Twitter連携プログラムが便利すぎる件

WordPressとGoogle+を連携するためにやっておくべき3つのコト

WordPressの新着記事をFacebookに自動投稿する方法

WordPressの設定で最初にやること

WordPress の Ktai Style を PHP 7 で動作するように修正した

Webサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版

レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました

ブログにTwitterやFacebook、はてブ等SNSのシェアボタンを設置する方法と手順

LINEで送るボタン設置方法|WordPressやMovabletypeなど各ブログにも

フッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法

iOS で click イベントがわけのわからない動作をする件について

スタイルシートだけでFont Awesomeのアイコンを表示する



広告





広告



関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。