Figmaでデザインを起こしてみよう – 2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現 Part2
これは「Vektor WordPress Solution Advent Calendar 2020」10日目の記事です。 日本語圏のWEBデザイナーやWEBデザインに興味がある人、とりわけFigmaに興味があるけれどちゃんと触ったことが無い方に向けて書いています。デザイン用語がいくつか出てきます。 この「2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現してみよう」というシリーズではFigmaといったデザインツールの使い方のヒントや、デザインを考えるための参考資料のリンク集、Lightningのカスタマイズのヒントなどが得られます。 前回の記事で、再現してみたいサイトは決まりましたので早速作業に入りましょう！ と言っても、いきなりWordPressは立ち上げません。 もちろんLightningとVK Blocksがあればブロックを組み合わせるだけでサイ
【WordPress】長い文字列を省略して表示したいなら［wp_trim_words］が便利です。
例えば投稿した記事の抜粋文を表示させるとき。多くの場合 the_excerpt を使うかと思います。 似たようなケースで、長い文字列を指定した文字数で切り取って取得・表示することができる便利なWordPress関数［wp_trim_words();］の使い方を紹介します。 ［wp_trim_words();］の使い方以下［wp_trim_words();］の引数の使い方です。 <?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ?> 指定できる引数は３つ。 $text第１引数は必須項目。切り取りたい文字列を指定します。$num_words文字数。デフォルト値は55文字に設定されています。$more第３引数では切り取った文字列の後に追加したい文字を指定できます。デフォルトでは「null」です。もちろん
アーカイブページ用に記事の文字数を制限して表示したい
アーカイブページやトップページなど、記事一覧で、各投稿の本文の一部だけを表示したい時がある。そこでWordPressのテンプレートタグを使って本文から指定の文字数まで記事を抜粋する方法。PHP関数も使用。 記事の一部を抜粋するテンプレートタグを使う the_excerpt()タグを使うのが最もシンプルで簡単な方法だ。ループ内で以下を記述すればOK。<?php the_content(); ?>の代わりに使うイメージ。 <?php the_excerpt(); ?> the_excerpt()タグの基本 the_excerpt()タグは記事の概要枠の内容（空の場合は本文で<!–more–>の前まで）を表示するテンプレートタグ。デフォルトの設定のポイントは以下の通り。 文字数は、デフォルトで55文字（日本語は110文字※）までが抜き出される <p>タグで括られる 110文字以上のときは末尾に[
【WordPress】the_title()に文字数制限
記事タイトルを一覧表示するときなどに、レイアウトなどの関係で記事タイトルの文字数を制限したいときがあります。 そういうときには <?php the_title(); ?> を下記のように書き換えます。 <?php echo mb_substr( $post->post_title, 0, 20) . '...'; ?> 記事タイトルの文字数を20文字に制限しています。「20」の部分を変えれば任意の文字数に変更できます。 しかしこのままだと、タイトルが制限文字数以内の場合でも後ろに「…」が付いてしまいます。 そのため、if文を使って制限した文字数以上のときは省略して「･･･」を、制限文字数以内のときはそのまま表示されるようにします。 制限文字数以上のときだけ省略記号をつける <?php if(mb_strlen($post->post_title)>20) { $title= mb_subs
アクセシビリティに関する .screen-reader-text クラスの使い方 | データベースに接続できません
WordPressの自作テーマを1年ぶりにTheme Checkしてみた。そこには新たな「REQUIRED」の文字が〜！ REQUIRED:.screen-reader-text css class is needed in your theme css. See See: the Codex for an example implementation. .screen-reader-text というクラスのスタイルが必要なので実装せよ、とのことだ。 .screen-reader-text におぼえがないので、WordPressが付与しているクラスだろう。WordPressが自動的に付与するクラスはいくつかある。bodyタグの.home、.single はじめ、グローバルナビゲーションの .current_page_item、アイキャッチ関連の .has-post-thumbnail など
【WordPress】特定カテゴリーで絞り込んだ記事の一覧を表示させる方法
TOPページや記事下などなど…任意の場所に「あるカテゴリーの記事を何件か自動で表示したい」時があるかと思います。 ブログであればイチオシの記事一覧、会社やお店のサイトであればお知らせの一覧など 今回はそんな「カテゴリーで投稿を絞り込んで表示する」カスタマイズが必要になった時のサンプルです 特定のカテゴリーが設定された投稿の一覧を表示させる 早速ではありますが、今回は「あるカテゴリーの記事最新4件を表示する」カスタマイズをしてみます 特定のカテゴリーの投稿の一覧を表示するPHPコード 早速ではありますが、「あるカテゴリーの記事最新4件を表示する」コードはコチラ▼ <?php $arg = array( 'posts_per_page' => 4, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表
WordPress トップページのテンプレは index.php ではなく front-page.php が最適 | Maromaro Blog
こんにちは。Maromaro のコーダー hoshidaです。 WordPress でWebサイトを構築する際、トップページのテンプレートは index.php ではなく front-page.php を使った方が良い、というお話です。 ※ただし、トップページが記事一覧になっているブログタイプのサイトであれば index.php を使用したほうが良い場合もあります。 なぜ index.php ではいけないのか WordPress のテンプレート階層の中で、index.php は最も下に位置しています。 テンプレート階層 – WordPress Codex 日本語版 上記ページの中盤の概念図を見るとわかりやすいですが、例えばサイトに検索フォームがあるのにもかからわず、テーマフォルダに shearch.php が無い場合、検索結果ページは index.php によって表示されます。 その時にも
テンプレートタグ/wp nav menu - WordPress Codex 日本語版
このタグは、ナビゲーションメニューを表示します。メニューは 管理画面 > 外観 > メニュー で作成できます。 theme_location パラメーターが与えられた時、このタグは theme_location が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、fallback_cb パラメーターで与えられた関数を呼び出してメニューを表示します。 theme_location パラメーターが与えられなかった場合、このタグは次の規則に従います。 menu パラメーターが与えられている場合、それ（ID、スラッグ、または名前）に一致するメニュー； さもなくば、最初の空でないメニュー； さもなくば（ひとつもメニューが定義されていない場合）、fallback_cb パラメーターで与えられた関数を呼び出す（デフォルトでは wp_page_men
【2023年】買ってはいけない有機ELテレビとは？買って失敗する有機ELテレビの特徴や正しい選び方を紹介
有機ELテレビは液晶を超える高画質モデルとして人気がありますが、中にはせっかく買ったのに後悔してしまうなんてケースも存在します。 高画質なのにどうして？ 疑問に感じるかもしれません。 そこで今回、買ってはいけない有機ＥＬテレビの特徴や、失敗しないための選び方などをまとめてみました！ 買ってはいけない有機ELテレビの特徴 例年5～7月に発売される新商品 発売直後の新商品は価格が非常に高いのでおすすめできません。 しかも、単に高いだけではありません。 新商品は時間が経てば必ず価格が下がる 元の値段が高いほど大きく下がる 新商品が出た時点では、1つ前の型落ちモデルの在庫が残っている場合がある 新旧モデルは基本的にマイナーチェンジで性能差がほとんどありません。 発売直後の新商品の購入は避け、型落ちモデルを狙っていきましょう。きっと満足できるお買い物ができるはずです。 聞いたことがないメーカー 聞い
【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法
2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。2024年04月05日テーマファイルが編集できない不具合を解消いたしました。2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年04月02日お問い合わせフォームを再構築いたしました。2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月30日WordPressの操作方法をサポートいたしました。2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。2024年03月28日テキスト等の簡易な修正を
WordPress を使った制作案件の今後。オリジナルでつくるか、無料/有料テーマを使うか
（追記）前提条件 なんか意図せずはてブに載っちゃったり、議論が白熱したいる感じがありまして、言葉足らずで誤解を生むとあれなので、この記事の前提条件を追記しておきたいと思います。 ブロックエディターになったことで、これまでよりも開発・保守の難易度があがる。これまでなんとなく WordPress を触っていた制作会社は使いやすい編集画面をつくるのが難しくなるかも。それを既存のブロックプラグインで補うというのは全然アリ。ブロックエディターにちゃんと追従している無料/有料テーマがちゃんとあって、それらを使うとエディターがめちゃ快適。ただし、すべての無料/有料テーマがブロックエディターに対応しているというわけではもちろんなくて、エスケープすらまともにしていないようなテーマも未だにある。つまり、オリジナルも無料/有料テーマもダメなものはダメで、良いものは良い。この記事はあくまで「WordPress を
WordPressに一括で大量の投稿データをCSVファイルを使って作成（登録）できるプラグインがとんでもなく便利！【日本語データもOK】｜今村だけがよくわかるブログ
WordPressに一括で大量の投稿データをCSVファイルを使って作成（登録）できるプラグインがとんでもなく便利！【日本語データもOK】 ブログとは違った形でWordPressを使うことがあって、大量の投稿データを登録する必要がありました。数万件とか・・・。その場合、WordPressの管理画面から地道に1つずつ投稿を作成して・・・ってのは、手間がかかりますね。 独自で一括登録できるプログラムを作るのもいいんですが、ここはひとつ、便利なプラグインを利用しましょう～。CSVファイルで投稿データをあらかじめ用意して、一括で登録できるプラグイン「WP Ultimate CSV Importer Plugin」を使う方法です。 かなり便利なので、もし使用する機会がありましたらご参考ください。 「WP Ultimate CSV Importer Plugin」のインストール＆有効化では、早速プラグイ
最新版！WordPressのブログやサイトの運営に役立つプラグインのまとめ
WordPressのデザイン、記事の投稿、コンテンツ配信、検索エンジン最適化、メンテナンス、バックアップ、セキュリティ、パフォーマンス、アンケート、ショッピング機能など、ブログやサイトの運営に役立つWordPressのプラグインを紹介します。 WordPress Plugins We Use プラグインは、海外のWeb制作系ブログ「CSS-Tricks」で実際に利用されている厳選プラグインで、それをなぜどのように使用しているのか非常に参考になりました。 CAPTCHAはコメントではなく、管理画面のログインに使用しているとか、なるほどと思いました。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 コンテンツ配信 検索エンジン最適化 メンテナンスとセキュリティ パフォーマンス デザインと記事の編集 パーミッションとモデレーション 販売 使
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
WordPressのSEOを強化する！プロが教える8つの設定 | 知らないと損をするサーバーの話
（この記事は2022年9月29日に更新されました） こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 最近、某社からCPIサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 今回は、サイト制作に不可欠ともいえるCMS（コンテンツマネジメントシステム）の中から、「WordPress」にフォーカスを当て、「WordPressを使ったSEOに強いサイト制作の手順」についてお話しします。 WordPressはその導入の手軽さから、年々ユーザーを増やしており、今、全世界の1/4のサイトがWordPressで作られているといわれています。 また、拡張性にも優れており、たとえば、「沈黙のWebマーケティング」「沈黙のWebライティン
信じられないくらいパワフルなWordPressテーマのMonstroidがリリース！ | バンクーバーのうぇぶ屋
ものすごいWordpressテーマが出たなーという事でこちらでもご紹介。北米圏で様々なテンプレート販売を行っている大御所と言えばTemplate Monsterが大御所かと思いますが、ここから（現時点では）究極と言って良いんじゃないかというレベルのWPテンプレート「Monstroid」が登場しました。 今までこのブログでは有料WPテーマの紹介等はしたことが無かったのですが、巷で結構ニュースになっていたのでこちらでも共有させて頂ければと思います。 とにかく、ありとあらゆる機能が実装 驚くべきはその機能面／選択肢の充実度です。145種類に渡るページテンプレート、120を超えるPSDファイル、50を超えるライセンス付きのイメージ画像。 バックアップは勿論、当たり前のようにレスポンシブデザインにも対応し、スキン変更も自由自在、E-Commerce機能にSEO対策済みで、Analytics実装、サー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】一覧ページ（archive.php）の作り方
Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】 | HPcode
【コピペで使える】日本語版WordPressチートシート
