webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

WordPressのテーマデータをGitで管理する

GithubのCI/CDツールを使ってWordPressの面倒な更新作業を自動化します。

通常のWordPressの更新作業のフロー

  1. ローカル(xampp)でwpのデータを修正・更新作業を進める
  2. 修正・更新箇所を社内のテスト用サーバーにアップロード
  3. 上長が修正・更新箇所を確認
  4. 問題無ければ社内のテスト用サーバーのデータを本番サーバーにデータを移行

ステップ数だと大した事ないように感じますが実際にやってみると色々と手間ですし、複数人での作業になった場合は、非常に面倒な作業になってしまいます。


これが、GithubのCI/CDツールを使えば自動化でき、データの先祖帰りも防げます。

GithubのCI/CDツールを使ったWordPressの更新作業のフロー

  1. ローカル(xampp)でwpのデータを修正・更新作業を進める
  2. 修正・更新箇所をGithubのdevブランチにアップロード
  3. 上長が修正・更新箇所を確認
  4. 問題無ければGithubのmainブランチにデータをマージ

秘匿性の高い情報を「secrets機能」を使って登録する

  • FTPホスト名
  • FTPユーザー名
  • FTPパスワード
on:
  push:
    branches: [main]
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v2.3.2
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.0.0
      with:
        server: ${{ secrets.FTP_HOST}}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        server-dir: アップしたい場所のパスを入れる

WordPressのテーマフォルダをGithubで管理する

WordPressのデータを全てGitで管理すると大変なので、テーマフォルダだけをGitで管理がおすすめです。ただし、その場合ダッシュボード上での作業は更新されないので注意が必要です。

なので、
ある程度規模の大きい更新作業はAll-in-One WP Migrationプラグイン
細かいデザイン部分の修正・更新はGihhubのaction機能で






「all-in-one-wp-migration」プラグインを使ったwordpressのデプロイ

プラグインを使ってデプロイさせます。デプロイとは「実行ファイルを実際のWebサーバー上に配置して、利用できる状態にすること」を指します。


ja.wordpress.org


このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。
とても簡単にデプロイ出来てしまうので、本当におすすめです。

最新版は小規模なシングルサイトであれば無料で問題なく利用できますが、最大アップロードサイズが「512MB」を超える場合、容量制限を増やす有料エクステンション(拡張機能)があります。

wordpressのデプロイ作業

ステップ1
本サーバー(スターサーバー)に新しいwordpressを作る。

ステップ2
開発サーバー(xampp)と本サーバーの両方に上記の「all-in-one-wp-migration」プラグインをインストールする。

ステップ3
開発サーバーのwordpressのデータをエクスポート。
「エクスポート先」と書かれた箇所をクリックして内容を展開し、「ファイル」を選択。

しばらく待ち時間が発生しますが、その後、「DOWNLOAD XXX.COM」といった感じのボタンがぼよぉ〜んとアニメーション付きで表示されるので、クリックしてファイルをエクスポートします。


ステップ4
ステップ3でエクスポートしたファイルを本サーバーにインポートします。ダッシュボード → All-in-One WP Migration → インポート画面を開き、エクスポートしたファイルをドラッグ&ドロップでアップロードするかファイル選択でアップロードしてインポートします。
その後、「PROCEED >」ボタンをクリックすることでファイルの内容が反映され、ログイン画面に戻され流ので、再度ログインして表示を確認しましょう。




www.vektor-inc.co.jp

[https://drive.google.com/file/d/19Nu0oLahhAaETsH_OPp8jFDFuvgCxFZ6/view]

All-in-One WP Migrationのアップロード(インポート)上限を上げる方法

wordpressは1つのファイルのアップロード上限を厳しく制限しているので場合によってはAll-in-One WP Migrationのファイルが上限に引っかかってしまう恐れがあります。そう言った場合はwordpressのフォルダ直下にある「.htaccess」にコードを追加する必要があります。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

モックアップの完全版 Facebook+Devices


www.anthonyboyd.graphics


https://photoshopvip.net/freebies/mockupphotoshopvip.net


www.youtube.com


Facebookが、誰でも無料で利用可能なAppleSamsungGoogle・HTC・Microsoftの各メーカーのスマートフォンタブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなっています。これ一つでほとんどのデバイスを網羅出来ています。


もちろん必要なデバイスだけを選らんでダウンロードすることも可能です。




design.facebook.com

フリー素材集