初めてのウェブサービスを WordPress + Vue.js で個人開発した話 - Crieit
はじめに 11月25日(日) に「にじさんじ配信スケジュール」と呼ばれるウェブサービスをリリースしました。 正確には初めてリリースしたサービスでは無いのですが、会員登録機能が用意された本格的なサービスを出した事がこれまでなく、実質的には初めてのサービスと呼んでも良いだろうと考えています。 という訳で、Crieit「個人開発サービスに用いられている技術 Advent Calendar 2018」6日目は「初めてのウェブサービスを WordPress + Vue.js で個人開発した話」と題して、開発に WordPress や Vue.js を用いたこと、ウェブサービスを作るまでの話や、リリース直後の話をしたいと思います。 n番煎じなテーマですし、蛇足に感じられる内容も多々あるかと思いますが、適宜必要な箇所をお読み頂ければ幸いです。 この記事の想定読者 これからウェブサービスを個人で作りたい方
この機会にぜひ！WordPress のバックアップを
これまでに国内海外で100以上の WordPress サイト運営に携わってきた僕の経験上、現在 WordPress のバックアップと復元をセットで簡単にしてくれる最も優れたプラグインは UpdraftPlus である。 海外でズバ抜けて No.1 のプラグインで、僕もクライアントのサイトのバックアップにはこのプラグインをおすすめしている。日本国内ではまだ BackWPUp が利用されているケースが多いが、古い情報を参考に「流れ作業」で導入されてしまっているようだ。もったいない。 今回紹介する UpdraftPlus のプラグインでバックアップすると、WordPress 管理画面で簡単に ｢1クリック｣ でバックアップデータを復元できるようになる。今から WordPress を使う人は、バックアップのプラグインに断然 ｢UpdraftPlus｣ を使うことをおすすめする。 UpdraftPl
WordPressをローカルに構築するならLocal by Flywheelが便利
Local by Flywheel | Local WordPress development made simple WordPressのローカル環境を手軽に構築できるLocal by Flywheelというツールの噂を聞き、試してみました。 Local by Flywheelを導入するダウンロードまず、サイト右上にある「DOWNLOAD」をクリックします。 「DOWNLOAD」をクリック「DOWNLOAD」をクリックすると、名前やメールアドレスを入力するフォームが表示されます。Local by Flywheelは現在、MacとWindows(Beta)に対応しています。情報を入力した後、「GET IT NOW！」をクリックするとファイルがダウンロードされます。私はWindows(Beta)を選択しました。 「GET IT NOW！」をクリックインストールファイルを解凍し、アイコンをダブ
WordPressのテーマ開発を初めて行う人に向けての制作フロー ｜https://wp.yat-net.com/name
WordPressでオリジナルのテーマを作成する際のフローをまとめました。サンプルも配布してるので、是非使ってみてください、 テーマ開発をやったことがない、それほどやってないという人でもなるべく分かるように書いていますので、手順通りにやっていただければ、テーマ開発をどうすれば良いのか？をわかってもらえると思います。 尚、執筆時点でのWordPressのバージョンは 4.8.2 です。 この記事を書くに当たり WordPress Codex日本語版と、WebDesign Recipes はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました を参考にさせていただきました。 目次 テーマのデザインをパーツに パーツの種類 コーディング WordPressの環境構築 必要なファイル テンプレートの種類 トップページのテンプレート化 header.php の編集 i
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
Simple Map – 超簡単＆スマフォ対応のGoogle Map | Firegoby
WordPressにGoogle Mapsを貼り付けるためのプラグインを作りました。 WordPress › Simple Map « WordPress Plugins 会社概要のページなどに企業のお客さんが設置するのを想定していますので低機能ですが、とても簡単に使える上に、レスポンシブデザインのサイトとフレンドリーです。 このプラグインの特徴 [map addr="東京都千代田区永田町1-7"] または [map]東京都千代田区永田町1-7[/map] のように住所を指定するだけの簡単なショートコードで地図を設置することができます。 １つのページに複数のGoogle Mapを設置できます。 一定の横幅以下の環境（たとえばスマフォなど、デフォルトは480px以下）では、自動的にGoogle Static Mapsが表示されます。 フィルターフックが用意されてるので、柔軟なカスタマイズが可
WordPressテーマの「while (have_posts()) : the_post();」の意味は？
WordPress 54 view WordPressテーマの「while (have_posts()) : the_post();」の意味は？ WordPressテーマを開いてカスタマイズしようとすると、 よく「while (have_posts()) : the_post();」というコード（PHPスクリプト）を見かけます。 以下、解説していきますが、全文を読むのが面倒な方のために意味だけ先に書きます。このコードは、 WordPressデータベースから取り出した投稿・固定ページを1件ずつ表示していく（1ページに10件表示など） という意味です（あくまでおおざっぱな説明ですが）。 それぞれの命令は、 while → 処理を繰り返す構文 have_posts() → 次の記事があるか調べる the_post() → 次の記事を取得する という役割を果たします。 これによって、「次の記事があ
WordPressの the_post() ってそもそも何者？
WordPressのユーザーコミュニティである『WordBench』（2018年9月23日をもって終了 WordPress Meetup に移行しています）にて「ループ」をテーマにした約4時間のハンズオンセミナーを行いました。 4時間、ループのことしかやらない勉強会はWordBenchでも異色だと思うのですが、参加された方の感想はおおむね好評だったようです。公式ドキュメントのCodex日本語版の「The Loop」の項が未翻訳というのも理由の一つかもしれません。 ［2017.3.11追記 日本語訳されてました！］ さて、WordPressカスタマイズのキモともいえるこのループ。私もかつて解説本から学んだとおり、 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- 記事があるときの表示内容をここに書
「WordPressのトップページに、新着記事数件を表示する」get_postsのサンプルコードをあげとく
※2018.03.01追記：4年半経ちましたが、今のところはおおむねこの記事のままで大丈夫と思ってます。定期的にチェックするのは大事。 今年に入ってから、「クエリ変更はquery_postsかpre_get_postsか」という話題がWordPress中級者以上の間では盛り上がっていましたが、初心者コピペWordPressユーザーの多くの方には「お前ら何を言っているんだ」ということでしょう。 実際、WordPress日本語フォーラムに投稿される質問の中でも、必要ないところでquery_postsを使って表示がおかしなことになっているケースがあとを絶ちません。 古い記事が検索上位に出ている現状 なぜ同じようなトラブルが減らないのかといえば、Googleで「WordPress 新着記事」「WordPress 新着情報」などのワードで検索した時、上位に表示されている記事が結構古いものが多いのにも
ちょいちょい忘れる『WP_Query』の使い方 | 予習と復習
WordPressでテンプレート作る時に、「WP_Query」は一番使ってる気がするのになんだかんだで、いっつも検索して調べてるので、覚えるためにも大雑把にまとめてみます。 『WP_Query』ってどんな時に使うのか？ WordPress のページの一部でメインループではない、独自のループ設定をしたい時なんかに query_posts() の代わりに使ったりします。 使い方は、欲しい引数の条件を設定してループに教えてあげればいい。 例えば、カテゴリ ID 1 の記事を 5 件欲しかったら <?php $args = array( 'cat' => 1, 'posts_per_page' => 5 ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) : while ( $the_query->have_
[WordPress]カスタム投稿タイプの記事一覧を取得して表示するソースコード
[WordPress]カスタム投稿タイプの記事一覧を取得して表示するソースコード 更新日: 2019/10/18 公開日: 2014/05/06カテゴリー: WordPress カスタム投稿タイプの記事一覧を表示カスタム投稿タイプの記事一覧を表示したい場所に、以下のソースコードを貼り付けて下さい。 4行目の「’post_type’」のパラメータ（post-type-nameと書かれている部分）に、表示したいカスタム投稿タイプの名前を入れます。 <ul> <?php $args = array( 'numberposts' => 5, //表示（取得）する記事の数 'post_type' => 'post-type-name' //投稿タイプの指定 ); $posts = get_posts( $args ); if( $posts ) : foreach( $posts as $post
![[WordPress]カスタム投稿タイプの記事一覧を取得して表示するソースコード](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3e97c5341963e1c12bca1a015d2478aea39c48a/height=288;version=1;width=512/https%3A%2F%2Fincrement-log.com%2Fwp-content%2Fuploads%2F2019%2F10%2Fdefault.png)
the_post_thumbnailで表示したアイキャッチ画像のサイズがおかしいとき - 西沢直木のIT講座
使用中のWordPressテーマによってはアイキャッチ画像を表示するコードを自力でテンプレートに入力しなければならないこともあります。 その方法をインターネットで調べると次のようなコードが見つかります。 <?php the_post_thumbnail(); ?> 基本的にはこのコードを入力すれば画面にアイキャッチ画像が表示されるようになります。 the_post_thumbnailは投稿や固定ページのアイキャッチ画像を表示する命令です。 これで問題なければ、この記事を書く必要もないのですが、実際は次のような課題や疑問が生まれる場合があります。 表示されるアイキャッチ画像が意図したサイズと違う 長方形の画像をアップロードしたのに、なぜか正方形の画像が表示される アイキャッチ画像の仕組みや、表示する命令のthe_post_thumbnailについて少し理解を深めることで、こうした問題は解決で
WordPressのショートコードを自作してみる
Posted: 2010.07.11 / Category: WordPress / Tag: ショートコード Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。 そんなときに便利なのがショートタグです。 ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。 で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。 プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。 たぶん一番シンプルなショートコード ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコー
SiteGuard WP Plugin | WordPressセキュリティプラグイン
特長 SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができるセキュリティプラグインです。 管理ページとログインページの保護を中心とした日本語対応のシンプル・簡単プラグインで、以下の攻撃を防ぐことができます。 不正ログイン 管理ページ（/wp-admin/）への不正アクセス コメントスパム 重要なお知らせ このプラグインは、インストールして有効化すると、自動的にログインページのURLを変更します。 （WordPressのログインページ（wp-login.php）を「login_<5桁の乱数>」に変更します。） 管理画面の「SiteGuard」＞「ログインページ変更」をクリックして、新しいログインページを確認してブックマークしてください。 また、新しいログインページのURLを管理者宛のメール（サブジェクト「WordPress:
WP Social Bookmarking Light の設定方法
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ブログやサイトで良質なコンテンツを作ってアクセスを集めていくためには、下図のようなソーシャルボタンが必須だ。なぜなら、これらのソーシャルボタンを介して、あなたのコンテンツが多くの人に拡散していくからだ。 幸運なことに、WordPressでは、WP Social Bookmarking Light というプラグインをインストールすれば、初心者でも簡単にソーシャルボタンを設置することができる。 それでは早速、WP Social Bookmarking Light の設定方法をご紹介していこう。 １．WP Social Bookmarking Lightの設定方法プラグインをインストールしたら、管理画面の左メニューの「設定」の中に「WP Soc
WordPressのデバッグプラグイン「Query Monitor」をサイト制作・カスタマイズに役立てよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアの段田です。 WordPressでテーマ作成やカスタマイズする際に便利なプラグインの紹介です。 元々WordPressでは、見ているページで使用されているテンプレートファイルや条件分岐タグの種類、実行されたSQLなどを確認できません。 ですが、この「Query Monitor」プラグインを導入すると確認することができます！ Query Monitorの導入方法 さっそく導入方法から見ていきましょう！ ダウンロード まずは「Query Monitor」をダウンロードしましょう。 https://wordpress.org/plugins/query-monitor/ もしくは管理画面のプラグイン新規追加画面にいきましょう。 インストール つぎに、インストールしましょう。 ファイルをダウンロードした方 ダウンロードしたらファイルを解凍し、pluginフォルダに設置する 管
データベースのバックアップ - WordPress Codex 日本語版
ブログで書きためた大事なデータを守るため、定期的にデータベースのバックアップを取りましょう。また、WordPress をアップグレードする 前にもバックアップを取っておくことをおすすめします。何か問題が生じた場合でもバックアップからデータベースを復元できます。 MySQL データベースのバックアップを取るには、phpMyAdmin やコマンドライン、各種 GUI ツールの利用など色々な方法があります。また、WordPress 用のプラグインを使えば、管理画面からのバックアップ作成や定期バックアップ取得が行えます。 注意: このページにある手順は投稿、固定ページ、コメントなどを含む WordPress のデータベースをバックアップしますが、サーバー上の画像やテーマファイルなどのファイルやフォルダはバックアップされません。WordPress サイト全体のバックアップについては、WordPres
Chrome拡張機能Appspectorで、WordPressを使っている他社サイトを探してみよう！
WordPressのサイトを見分けるChrome拡張機能Appspector 普段からWordPressを使っていると、よそのサイトを見たときに「これWordPressっぽい作りだな」って思ったりしますよね。 それを一目で見分けられる優秀なChrome拡張機能があります。「Appspector」と言いまして、今見ているサイトがどんなCMSやWebアプリケーションを使っているのかをアドレスバー上にアイコン表示してくれるにくいやつです。 icon-arrow-circle-up アドレスバーにWのマークが表示され、それをクリックすると使われているPHPやJQueryのバージョンなども確認できます。 使い方は簡単。お使いのChromeから「設定」 icon-angle-right 「拡張機能」 icon-angle-right 「他の拡張機能を見る」 icon-angle-right 「Chro
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 | BLOG ROOM9（ブログルームナイン）
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 2014 7/10 WordPressガッツリ使い倒すぞー！ PHP、HTML、CSS超勉強するぞー！ で、まず何したらいいの！？ なんて方はかなり多いかと思います。というか僕がそうでした。そんなワケで今回は Web制作ど素人だけどWordPressのサイト構築をバリバリできるようになりたい！ ブログ書くだけじゃなくテーマをゴリッとカスタマイズできるようになりたい！ こんな方々に超オススメの国内有名ブログを18個紹介させていただきます。Web制作のスキルというとデザインだったり、集客だったり色んな要素が考えられますが、今回は 構築、及びコーディング つまりサイトを”作る”という点で特に参考になるブログのまとめです。 構築・コーディングとは言ってもWeb制作の括りではかなり基礎的なレベルから勉強
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20161218localflywheel
