[notes] Bootstrap practice - Chapter 3 WordPress Theme [from]

Article directory

1, Navigation section

1. Introduce bootstrap and jquery

  • Modify the following file \ resources\views\partials\head.blade.php:
  • Original document:
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  @php wp_head() @endphp
</head>
  • Revised to:
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  @php wp_head() @endphp
</head>

2. Add navigation

  • Modify the following file \ resources\views\partials\header.blade.php:
  • Original document:
<header class="banner">
  <div class="container">
    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
    <nav class="nav-primary">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
      @endif
    </nav>
  </div>
</header>
  • Revised to:
<header class="banner">
  <div class="container">
      <nav class="nav-primary navbar navbar-static-top navbar-default">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"><img src="http://wordpress.test/media/logo.png" alt="Bootstrappin'" width="120"></a>
    </div>
    <div class="navbar-collapse collapse">
        @if (has_nav_menu('primary_navigation'))
          {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav']) !!}
        @endif
    </div><!--/.nav-collapse -->
      </nav>
  </div>
</header>
  • At this time, debugging found that the small screen button is not displayed, but available, regardless of it..

2, Add home page content

1. Upload and process pictures

  • Add picture: media add select Picture drag upload
  • Add alternate text to picture

2. Add home page content

  • Copy all the codes of main, excluding the main tag (ාhomepage-feature.carousel,. container)
  • Paste it into other code editor first, and do the following
    • Modify the src attribute of img to a new link
  • Open the page Home edit page and switch to the text editor
  • Paste code edited outside
  • Update, view the effect (the effect is almost all in)

Note: WordPress 5.0 and above may fail to update. Error message: this response is not a valid JSON response. , replace the Classic Editor plug-in.

3, Custom page template

  • Locate the template-custom.blade.php template sample file in the resources\views directory of the current template
  • Copy a copy and rename it page-home.blade.php, click in, and change the template name (in the note) to the following:
{{--
  Template Name: Homepage Template
--}}
  • Open page - Quick Edit of Home page
  • Change the default template to Homepage Template and update it
  • Open page-home.blade.php in the editor. The current code is as follows:
{{--
  Template Name: Homepage Template
--}}

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp
    @include('partials.page-header')
    @include('partials.content-page')
  @endwhile
@endsection
  • Revised to:
{{--
  Template Name: Homepage Template
--}}

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp
    <!-- @include('partials.page-header') -->
    @include('partials.content-page')
  @endwhile
@endsection
  • The operation is as follows:
    • Comment out the header

4, Understand the benchmark template of Roots

  • Open app.blade.php under resources\views\layouts (the old version is base.php). The source code is as follows:
<!doctype html>
<html {!! get_language_attributes() !!}>
  @include('partials.head')
  <body @php body_class() @endphp>
    @php do_action('get_header') @endphp
    @include('partials.header')
    <div class="wrap container" role="document">
      <div class="content">
        <main class="main">
          @yield('content')
        </main>
        @if (App\display_sidebar())
          <aside class="sidebar">
            @include('partials.sidebar')
          </aside>
        @endif
      </div>
    </div>
    @php do_action('get_footer') @endphp
    @include('partials.footer')
    @php wp_footer() @endphp
  </body>
</html>
  • Simple understanding:
    • @include('partials.head')
    • @include('partials.header')
    • @include('partials.sidebar')
    • @include('partials.footer')
    • . container: used to constrain width and avoid full width
    • App\display_sidebar(): app/helpers.php

Blade template - blue sky - blog Garden of PHP laravel series
https://www.cnblogs.com/zswbky/p/8454120.html

5, Create a custom base template

  • Make a copy of app.blade.php and rename it to app-page-home.blade.php
  • Remove the container class with wrap class: < div class = "wrap" role = "document" >
  • Modify @ extends('layouts.app ') of page-home.blade.php to @ extends('layouts.app page home')
  • Refresh the viewing effect: the conveyor part is as wide as the screen

6, Using custom columns in a custom structure

  • Open the editing interface of Home page
  • Copy four img labels, and name each custom column item1~4 (if the custom column cannot be found, it can be displayed in the upper right corner)
  • The column contents are named column1-3, and the contents are all the contents of each. col-sm-4.
  • Update page

7, Create a custom content template

  • Copy content-page.blade.php and rename it to content-home.blade.php. The original content is as follows:
@php the_content() @endphp
{!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}

  • Remove the content from the page editor: @ php the_content() @endphp
  • Remove page links: {!! wp_link_pages (['echo '= > 0,' before '= >' < NAV class = "page NAV" >
  • Enter Hello this is a test! As test content
  • Modify page-home.blade.php to change @ include ('partials. Content page ') to: @ include ('partials. Content home')
  • Save changes, refresh home page

8, Building conveyor belts with custom columns

  • Delete the test code in content-home.blade.php and add the following content:
    <div id="homepage-feature" class="carousel slide">
	    <ol class="carousel-indicators">
	        <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
	        <li data-target="#homepage-feature" data-slide-to="1"></li>
	        <li data-target="#homepage-feature" data-slide-to="2"></li>
	        <li data-target="#homepage-feature" data-slide-to="3"></li>
	    </ol>

	    <!-- Wrapper for slides -->
	    <div class="carousel-inner">
	        <div class="item active">
				<?php $item="item1"; echo get_post_meta($post->ID, $item, true); ?>
			</div>
	        <div class="item">
				<?php $item="item2"; echo get_post_meta($post->ID, $item, true); ?>
			</div>
	        <div class="item">
				<?php $item="item3"; echo get_post_meta($post->ID, $item, true); ?>
			</div>
	        <div class="item">
				<?php $item="item4"; echo get_post_meta($post->ID, $item, true); ?>
			</div>
		</div><!-- /.carousel-inner -->

	    <!-- Controls -->
	    <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
	        <span class="icon fa fa-chevron-left"></span>
	    </a>
	    <a class="right carousel-control" href="#homepage-feature" data-slide="next">
	        <span class="icon fa fa-chevron-right"></span>
	    </a>
	</div><!-- /#homepage-feature.carousel -->
	<div class="page-contents container">
		<div class="row">
			<div class="col-sm-4">
			    <?php $column="column1"; echo get_post_meta($post->ID, $column, true); ?>
			</div>
			<div class="col-sm-4">
			    <?php $column="column2"; echo get_post_meta($post->ID, $column, true); ?>
			</div>
			<div class="col-sm-4">
			    <?php $column="column3"; echo get_post_meta($post->ID, $column, true); ?>
			</div>
		</div><!-- /.row -->
	</div><!-- /.container -->
  • Where <? php $item = "item1"; echo get ﹣ post ﹣ meta ($post - > ID, $item, true);? > creates a php variable for the custom column and references it in the get ﹣ post ﹣ meta() template label. The parameter list $post - > ID, $item, true means to get the column named item1 of the current page and return its string representation (false means to return the array)
  • Refresh the homepage to see the effect (the effect is displayed successfully)

9, Add footer content

  • Open the appearance of the dashboard - widget, you can see the footer at the far right, click open, drag the text in, copy the code snippet (below) to the large text box, the title is empty, save
<p><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>

<ul class="social">
   <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
   <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
   <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
   <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
   <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>

10, Replace our assets resources

Document: https://roots.io/sage/docs/theme-development-and-building/ (theme assets)

  • config.json is the manifest file of assets. By default
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "http://example.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
  • Copy a copy of the source assets folder and rename it to "assets" original
  • build does not move.
  • fonts and img are copied directly
  • Copy the main.js code directly to the default main.js
  • plugins.js directly copied to script folder
  • Copy main.css directly to style folder (automatically "Mount" to main.scss file)
  • Add the following under "entry" of config.json
"entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss",
      "./styles/main.css"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ],
    "plugins": [
      "./scripts/plugins.js"
    ]
  },

In add action ('wp ﹣ enqueue ﹣ scripts', function() {}, 100) of app/setup.php, add:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_enqueue_script('sage/plugins.js', asset_path('scripts/plugins.js'), ['jquery'], null, true);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}, 100);
  • Under the following environmental conditions:
    • npm
    • cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org)
    • node
    • webpack(cnpm install -g webpack)
    • python2
  • Run yarn build in the custom theme root directory, and the result is as follows:

  • Refresh view home page

Adding resource files (js, css) to wordpress theme is still unfamiliar

  • suspend

Expand:

Published 34 original articles· Zan Zan 83. 20000 visitors+
Private letter follow

Tags: PHP JQuery JSON npm

Posted on Wed, 15 Apr 2020 02:21:14 -0700 by IsmAvatar