おっきー

web制作の知識(主にHTML,css,js,WordPress)をアウトプットとして…

おっきー

web制作の知識(主にHTML,css,js,WordPress)をアウトプットとして記しています 駆け出しなので本記事の内容を鵜呑みにせずしっかり自分で調べてから実装していただければと思います

【WordPress正規移行手順さくらインターネットver】

ローカルで開発したWordPressのサイトをサーバー上(さくら)へ移行する手順の覚書です。 (順番はこの通りでなくても良い) 初めに移行元のデータベースをエクスポートしておきます さくらのコンパネへログインし、データベースを新規作成します。 Webサイト/データ->データベース->新規追加 データベースを作成したら移行元からエクスポートしたDB一式をインポートします。 その後サーバー上のドメインのルートディレクトリにローカルで作成したWordPressフォルダ一式をアッ

おっきー

    • 【HTML CSS】画像ホバーエフェクト

      いろんなサイトで見かける画像エリアをホバーしたときにリンクですよってのを視覚的にわかりやすくするエフェクトですが、無難なもので言うと単に透過させるだけですがこれだと味気ないのでよくあるのが画像にホバーすると少し画像だけがズームアップするエフェクトです cssだけで簡単に出来ます。 <a class="zoom" href="#"> <img src="hogehoge.jpg" alt="hoge"></a> 画像を囲うaタグにクラスをつけておきそのクラスに以下のス

      おっきー

      • 【WordPress】関連記事表示プラグイン無し

        投稿の詳細ページなどで記事の終わりによくある関連記事の表示。 プラグインで実装することが多いそうですが簡単そうだったので自作してみます。 <?php $category = get_the_category(); $cat_ids = array(); foreach ($category as $cat) { $cat_ids[] = $cat->term_id; }; ?> <?php $myposts = get_

        おっきー

        • 【HTML CSS】親要素から飛び出させる

          コンテンツ幅のMAXを指定していて中の要素はコンテンツ幅に合わせたいけど背景だけはウィンドウ幅100%に広げたい時がたまにあると思います。 そゆ時は幅に100vwなどを使ってあげるとよき。 グレーの背景部分をウィンドウ幅いっぱいに広げる感じ。 width: 100vw;の時点では右側だけ飛びてていてそこからコンテンツ幅の50%分のmarginをとり、さらにそこから50vwを引くって感じの動き！！ 説明がムズイ。。。。w

          おっきー

        【WordPress正規移行手順さくらインターネットver】

        おっきー

          【jQuery】data関数について

          最近モーダルなどのコーディングをする際にHTML5のdata関数なるものを使ったんですがこれがまたお便利だったので書いておきます。 data関数とは html5で追加されたdata関数とは主にjQueryなどで値を取得したり変更したりできる属性のことです <a href="#" class="js-close-btn" data-target=".target-modal"> このようにdata-〇〇とし、対象となる要素のクラス名やidを入れます。 そしてjQueryで

          おっきー

          【jQuery】data関数について

          おっきー

          タームにカスタムフィールドで設定した画像を表示させる方法

          ターム編集画面にカスタムフィールドで設定しその画像をタームのサムネイル画像としてループ内で表示したいときの表示方法です <?php $terms = get_terms('brand');?> <?php foreach($terms as $term): ?> <?php $image = get_field('taxonomy-thumbnail', $term); ?>//(フィールド名、タームオブジェクト)) <img class="w-100"

          おっきー

          タームにカスタムフィールドで設定した画像を表示させる方法

          おっきー

          タクソノミーアーカイブで子タームとそれに紐づく投稿を表示

          カスタム投稿「work」を作り、そのタクソノミー「genre」にタームをいくつか追加していきます。 「taxonomy-genre.php」にてターム「親」直下の「子」とゆうターム情報を表示し投稿も表示するとゆう作業をしたので備忘録として。。。 「この赤枠の名前と説明を表示したい！！！！」 早速コードですがtaxonomy-genre.phpで以下で子ターム情報を取得します <?php $tax = get_queried_object();//現在の表示中のタームを取

          おっきー

          タクソノミーアーカイブで子タームとそれに紐づく投稿を表示

          おっきー

          calc関数

          calc関数最近になってようやく使い方が少しわかるようになり その便利さに気付きましたが、最初見たときはそりゃまあ意味不明でした。 だって関数って名前ついてるし？？？？？でした。 僕個人として良く使う場面としては、良くあるカード型レイアウトです。 ↓こんなの 僕は普段こういったレイアウトの時はBootStrapのグリッドシステムを使用するのですが(col-〇〇)、上記画像の最後の5カラムの時にBootStrapのグリッドでは再現しづらいのでcalcを使っています。正しいか

          おっきー

          calc関数

          おっきー

          functions.phpにてcssやjsファイルを読み込む

          CSSファイルやjsファイルを読み込む際に通常(WordPressを使用しないサイト)であればHTMLの<head>タグ内で読み込むと思います。 ですが、WordPressを用いたサイトであれば<head>タグ内で読み込むことも可能ですがそれはあまり好ましくないようです。 以下公式引用 『ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。』 ではなぜこのようにfunct

          おっきー

          functions.phpにてcssやjsファイルを読み込む

          おっきー

          jQueryをCDNで読みこむ

          「jQueryってCDNで読み込むの？そもそもCDNって何？ダウンロードしてから読み込むのと何が違うの？その記述はheadタグ内なの？</body>の直前なの？」 上記の質問を友人に聞かれたのでそれに対するアンサー兼備忘録として記しておきます。 ファイルをダウンロードしてきて読みこむ方法まずjQueryを使えるようにするようには公式ページより必要なバージョンのフォルダ類をダウンロードしてきてそれを自身が制作している環境内のディレクトリに配置し、HTMLファイルにて読み

          おっきー

          jQueryをCDNで読みこむ

          おっきー

          WordPressのループ中に記事数に応じて数字を付与していく(?)

          お題の通り、例えばECサイトなどで商品をピックアップしてランキング形式で表示する時に1位、2位、3位。。とゆう風に数字を順番につけていくと思います。 死ぬほどシンプルだし簡単だと思いますが僕は間抜けなので悩んでいるところを先輩エンジニアの方にさささっと教えて頂きました(まじ凄い)。 <?php if ($query->have_posts()) : ?><?php $count = 1; ?><!-- ループの前に始まりの数字を$countに代入 --> <?php wh

          おっきー

          WordPressのループ中に記事数に応じて数字を付与していく(?)

          おっきー

          WordPressサブループにて5件特定のカテゴリ記事を表示。(素人)

          ※下記内容はWordPressについて勉強中の素人が覚え書きで綴る程度ですので悪しからず。 皆さん、WordPressを使ってサイト制作をしている時に良くある事例として トップページや固定ページで、あるカテゴリに属している記事や商品をおすすめやピックアップとして5件程載せたい時ってありますよね。大抵のECサイトやコーポレートサイトはそのようになっています。 私も仕事でそれを使ったので忘れないようにメモとして後から見返せるよう記載します(覚えろ)。 上記コードで'hoge

          おっきー

          WordPressサブループにて5件特定のカテゴリ記事を表示。(素人)

          おっきー