WordPress記事一覧

【テスト工程】Webサイト納品前のチェックリストを大公開!
詳細を見る

Webコーディング

【テスト工程】Webサイト納品前のチェックリストを大公開!

Web制作での品質管理。皆さんはどうしてますでしょうか? Webサイト納品前の大事な工程「テスト」。チェックリストを公開します。 表示崩れはないか Webサイトに重要な要素「デザイン」。 制作現場ではデザインを基にコーディングするのが一般的です。 そしてそのコーディングがデザイン通り、もしくはデザインに則った形になっているかどうかをチェックします。 画像や文字がはみ出していたり、スマートフォンだと […]
Web制作の「運用・保守」って何するの?
詳細を見る

Webコーディング

Web制作の「運用・保守」って何するの?

Web制作の仕事をしていたり、発注したりするときに目にする「運用・保守」という言葉。 あまり表立って見えるような作業ではないため、運用保守費用を「無駄なお金」と感じているクライアント様も多いはず。 そこで今回は、運用・保守ではどんな作業をしているのかを解説します。 サーバー・ドメイン管理 Webサイトが置かれているサーバーやそのドメインを管理します。 必要に応じて サーバー・ドメインの設定 プログ […]
PHPを使ってCSSやJSのキャッシュ削除を自動化しよう
詳細を見る

Webコーディング

PHPを使ってCSSやJSのキャッシュ削除を自動化しよう

Web制作をしているとよくある会話 コーダー「こちら修正しました。ご確認よろしくお願いいたします」 クライアント「変わっていません…」 コーダー「キャッシュ削除してください。方法は…」 あるあるですよね? キャッシュ削除について何度も説明するのが面倒だという話をよく聞きます。 そんな時はキャッシュ削除を自動化しませんか? date関数だけでもいいが、難点がある CSSのキャッシュを残さないようにす […]
aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」
詳細を見る

Webコーディング

aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」

aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。 では、どのように記述すればよいのでしょうか? 実際のコードとともに紹介いたします。 rel属性で設定を追加 rel属性でnoreferrerとnoopenerを指定します。たったこれだけ。 誤字に注意しましょう。 なぜ「noopener」や「noreferrer」を記述 […]
FTPアップロードをGitプッシュで自動化する方法
詳細を見る

Webコーディング

FTPアップロードをGitプッシュで自動化する方法

Web制作ではよく「Filezilla」などのFTPクライアントを使ってサーバーにアップロードするのですが、これって正直、面倒ではありませんか? どうせGitを使ってバージョン管理しているのなら、GitHubにプッシュ→FTPアップロードが自動でできたら…なんて思ったことはありませんか? 実はそんな便利な機能、あるんです。紹介しますね。 仕組み ローカル環境からプッシュをすることでGitHubに反 […]
【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい
詳細を見る

Webコーディング

【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい

プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。 そんなときは行数を制限すると見栄えが良くなります。 これを→ 2行に収めたい そんなお悩みはCSSで解消できちゃうかもしれません。 CSSでの実装方法 CSSでは横幅から余ってしまう文字を省略し、3点リーダーを表示させることができます。 以前はPHPで文字数制限をかけてい […]
WordPressでサイト内検索フォームを実装しよう
詳細を見る

Webコーディング

WordPressでサイト内検索フォームを実装しよう

Webサイトでコンテンツが増えてきた時にユーザーが探しているコンテンツを見つけるのに時間がかかるなんてことは多々あります。 そこで、サイト内検索フォームの導入を検討してみてはいかがでしょうか? サイト内検索フォームを実装することで、サイト回遊率もアップすることでしょう。 テーマフォルダにsearchform.phpとsearch.phpを用意。 「/{ルートディレクトリ}/wp-content/t […]
MAMPでWordPressローカル開発環境を作ろう
詳細を見る

Webコーディング

MAMPでWordPressローカル開発環境を作ろう

今回はMAMPでローカル仮想環境を作ってそこにWordPressを設置する方法を紹介いたします。 開発環境 デバイス MacBook Pro 14インチ 2021(M1 Pro) OS Mac OS Monterey(ver 12.6) 必要なアプリケーション MAMP、ターミナル、その他テキストエディター 開発用のディレクトリを作成 まずは開発用のディレクトリを作成しましょう。 私は「/User […]
【Mac OS】MAMPでWordPress仮想環境を作成する方法
詳細を見る

Webコーディング

【Mac OS】MAMPでWordPress仮想環境を作成する方法

今回はMAMPでWordPress仮想環境を作成する方法 についてご紹介します。 前提として以下の条件を満たす方に読んでほしい内容となっております。 MAMPがインストールされている MAMPでバーチャルホスト設定が済んでいる エディターやターミナルの利用に慣れている データベースを触ることができる プロジェクトフォルダ作成 自身のPC内にプロジェクトフォルダを作成しましょう。 今回は「wp-de […]
【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する
詳細を見る

Webコーディング

【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する

こんにちは、Web it Worksの伊東です。 今回は、WordPressでリッチリザルトに対応したぱんくずリストを実装する方法をご紹介します。 パンくずリストについての説明は以下の記事をご覧ください! https://webitworks.jp/web/breadcrumb-seo-rich-result/ 本記事の対象者 早速、ソースコード紹介 まずは functions.php に以下の関 […]