Recent Posts

Create header.php for original theme


2020-07-21 PHP WordPress

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create header.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

What content should be contained?

These are examples of contents in the header.

  • Title
  • Description
  • Menu

hader.php

<?php
/* *
* The Header for techblog.
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
	<a class="skip-link" href="#content"><?php esc_html_e( 'Skip to content', 'techblog' ); ?></a>
	<div class="header-main">
		<h1 class="site-title">
			<?php if (has_custom_logo()):
				the_custom_logo();
			else : ?>
				<a class="title-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr(get_bloginfo('name'));?>"><?php echo esc_html(get_bloginfo('name'));?></a>
			<?php endif; ?>
			<span class="site-description">
				<?php echo esc_html(get_bloginfo('description'));?>
			</span>
		</h1>
		<?php 
		wp_nav_menu(
			array(
				'menu'				=> '',
				'theme_location'	=> '',
				'container'			=> 'div',
				'container_class'	=> 'manubar',
				'menu_class'		=> 'nav',
				'fallback_cb'		=> 'wp_page_menu',
				'items_wrap'		=> '<ul id="%1$s" class="%2$s">%3$s</ul>',
			)
		); ?>
	</div>
</header>

functions.php

/*-------------------
enqueue scripts
-------------------*/
add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	// Add main theme stylesheet
	wp_enqueue_style( 'techblog-main-style', get_stylesheet_uri(), null);
}

Functions

wp_head()htmq.com/style/font-weight.shtml

The function wp_head() should be in <head></head>. This is initially the same as do_action(‘wp_head’).

function wp_head() {
    /**
     * Prints scripts or data in the head tag on the front end.
     *
     * @since 1.5.0
     */
    do_action( 'wp_head' );
}

This function fire functions attached to the hook ‘wp_head’. For example, some functions are added to the hook ‘wp_head’ in wordpress\wp-includes\default-filters.php as below.

// Actions.
add_action( 'wp_head', '_wp_render_title_tag', 1 );
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'wp_resource_hints', 2 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
...

Please check “What is Hook in WordPress?” for details about hooks in WordPress.

body_class()

The function body_class() is displays the class names for the body element.

function body_class( $class = '' ) {
    // Separates class names with a single space, collates class names for body element.
    echo 'class="' . esc_attr( implode( ' ', get_body_class( $class ) ) ) . '"';
}

The following is an example of actual HTML output.

<body class="home blog logged-in admin-bar no-customize-support">

wp_body_open()

This function is initially the same as do_action(‘wp_body_open’).

function wp_body_open() {
    /**
     * Triggered after the opening body tag.
     *
     * @since 5.2.0
     */
    do_action( 'wp_body_open' );
}

Menu bar

wp_nav_menu(array $args = array())

wp_nav_menu() is the function to display navigation menu. the arguments list can be seen here.

How to import style.css in the header

It is recommended to use wp_enqueue_scripts instead of embedding <link rel=”stylesheet” href=”wordpress/wp-content/themes/techblog/style.css” type=”text/css”/> in header.php directly.

Add add_action( ‘wp_enqueue_scripts’, ‘<enque_function_name>‘ ); in functions.php of your theme.

add_action( 'wp_enqueue_scripts', 'techblog_scripts' );
function techblog_scripts() {
	// Add main theme stylesheet
	wp_enqueue_style( 'techblog-main-style', get_stylesheet_uri(), null);
}

Result

Change the style

Appendix

<link rel=”profile” href=”http://gmpg.org/xfn/11″>

In many WordPress themes, the link tag <link rel=”profile” href=”http://gmpg.org/xfn/11″> is contained within <head>. This tag is used for making relationship to  XMDP (Xhtml Meta Data Profiles). You don’t need include this. You can see more information in “What rel=profile is for?“.

How to use wp_enqueue_scripts in WordPress


2020-07-19 WordPress

GOAL

To understand what wp_enqueue_scripts() is and how to use it in WordPress

Environment

WordPress5.5.3

What is wp_enqueue_scripts?

‘wp_enqueue_scripts’ is one of the hooks built in WordPress. It can be used by hooking some function. Please visit “What is Hook in WordPress?” for details about hooks.

Reference: wp_enqueue_scripts in wordpress.org

When is it used?

‘wp_enqueue_scripts’ can be used to register and enqueue When calledscripts(.js) or stylesheet(.css) to your theme. It call attached function with add_action( ‘wp_enqueue_scripts’, ‘attached_function_name‘ );

Functions wp_register_script(), wp_register_style(), wp_enqueue_script() and wp_enqueue_style() can be used in the function attached to ‘wp_enqueue_scripts’.

register

Register functions registers a script(js file) or stylesheet(css file) to use later on WordPress.

enqueue

Enqueue function add registered script or stylesheet to the queue in which enqueued scripts and stylesheets are outputted in the header.

Why is is used?

That’s because it is better to register script once and use it in some different pages. While if you embed scripts and stylesheets directly in header php file, the scripts and stylesheets are loaded in all pages, sometimes you’d like to use scripts only one page or use different scripts in a special case.

How to use wp_enqueue_scripts

Add add_action( ‘wp_enqueue_scripts’, ‘my_enque_function’ ); in functions.php of your theme and define my_enque_function to register and enqueue scripts and stylesheets.

add_action( 'wp_enqueue_scripts', 'my_enque_function' );
function my_enque_function() {
    wp_register_style('mystyle', 'dir_name/css/style.css' );
    wp_register_script('myscript', 'dir_name/js/myfunc.js' );
    wp_register_style('font-styles', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Roboto+Slab:wght@600;700&display=swap');
    wp_enqueue_style('mystyle');
    wp_enqueue_script('myscript');
    wp_enqueue_style('font-styles');
}

Register function can be omitted by using src arguments. Incidentally, the argument src is required in wp_register_style() and wp_register_script().

add_action( 'wp_enqueue_scripts', 'my_enque_function' );
function my_enque_function() {
    wp_enqueue_style('mystyle', 'dir_name/css/style.css' );
    wp_enqueue_script('myscript', 'dir_name/js/myfunc.js' );
    wp_enqueue_style('font-styles', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Roboto+Slab:wght@600;700&display=swap');
}

[Tips]How to detect “Enter Key” pressed in C/C++?


2020-07-16 C++ Tips

GOAL

To detect enter key pressed in C/C++ program.

Environment

Windows 10
Visual Studio 2017

Method

Method 1. get char

If you just detect enter key pressed at any time, use getchar() or cin.get() function.

C language

#include <stdio.h>
#include <windows.h> // for Sleep function

int main(void)
{
	while(true){
		if (getchar() == '\n') {
			printf("Enter key is pressed");
			Sleep(1000); //wait for check printed message.
			break;
		}
	}
	return 0;
}

C++

#include <iostream>
using namespace std;

int main() {
	while (1) {
		if (cin.get() == '\n') {
			cout << "Enter key is pressed" << endl;
			break;
		}
	}
	return 0;
}

Method 2. get line

If you’d like to detect that only enter key is pressed without input another key before enter, use scanf() , fgets() or gets() in C language or getline() in C++

C language

#include <stdio.h>
#include <string.h>
#include <windows.h> // for Sleep function

int main(void)
{
	while (1) {
		//if (getchar() == '\n') {
		char str[32];
		gets(str);
		if(strcmp(str,"")==0){
			printf("Enter key is pressed");
			Sleep(1000); //wait for check printed message.
			break;
		}
	}
	return 0;
}

C++

#include <iostream>
using namespace std;

int main() {
	string str;
	while (1) {
		getline(cin, str);
		if (str == "") {
			cout << "Enter key is pressed" << endl;
			break;
		}
	}
	return 0;
}

Method 3. GetKeyState

GetKeyState() is only provided on Windows. You can get the current “state” of the key. It returns 0 when the key is not pressed.

The key code is here.

#include <iostream>
#include <windows.h> // for GetKeyState function
using namespace std;

int main() {
	cout << "some process here" << endl;
	while (1) {
		if (GetKeyState(VK_RETURN) < 0) {
			cout << "Enter Key is Pressing" << endl;
		}
		else if (GetKeyState(VK_ESCAPE) < 0) {
			break;
		}
	}
	return 0;
}

Categories

AfterEffects Algorithm Artificial Intelligence Blender C++ Computer Graphics Computer Science Daily Life DataAnalytics Event Game ImageProcessing JavaScript Kotlin mathematics Maya PHP Python SoftwareEngineering Tips Today's paper Tools TroubleShooting Unity Visual Sudio Web Windows WordPress 未分類