웹퍼블리셔의 팁 창고

네임서버 변경없이 도메인 구입처에서 A레코드 추가를 통한 도메인 연결 방법
1. 도메인 구입처 로그인 후 DNS 설정으로 이동
2. 두개의 호스트(www 및 @) 추가, 각각의 값/위치에는 호스팅사의 서버 IP 주소 입력
3. 호스팅사 로그인(카페24 예시). 도메인 추가 연결 진행

※ 기존에도 도메인 구매처에서 위와 같이 도메인 연결이 되어있을 경우 신규 호스팅사로 네임서버 변경없이 가능하다.
- 특히 기존 사이트에서 도메인 구매 및 연결, 호스팅까지 이용했을 경우 MX 레코드값 변경을 안해도되기때문에 유리.
- Office365, 아웃룩 연동하여 이메일을 사용하는 회사, CName 및 MX 값 등이 얽혀있는 회사에 유리.


Referance URL
- 워드프레스 정보꾸러미 | 네임서버 정보 변경과 A 레코드 변경 차이점
- (주)심포니소프트 | 워드프레스 웹호스팅에서 네임서버 변경없이 웹호스팅 연결하기
- 아임웹 | 타사에서 구입한 개인 도메인 연결하기 (네임서버, A레코드)
- 가비아 라이브러리 | 도메인, 웹호스팅 업체가 다를 때 홈페이지에 도메인 연결하는 방법

https://wordpress.org/download/

WordPress version 5.4.2 (2020년 6월 30일 현재) : Requirements

- We recommend servers running version 7.4 or greater of PHP and MySQL version 5.6 OR MariaDB version 10.1 or greater.

- We also recommend either Apache or Nginx as the most robust options for running WordPress, but neither is required.

https://wordpress.org/about/requirements/

To run WordPress we recommend your host supports:

- PHP version 7.4 or greater.

- MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.

- HTTPS support

https://kopress.kr/blog/docs/user/about-wordpress/requirements/

Settings > General의 이메일 주소 변경, User의 이메일 주소 변경 등
DB를 통한 직접 이메일 주소 변경 이후 "Save Changes" 및 "Update Profile" 클릭 요망

https://sdsupport.cafe24.com/board/tip/read_begin.html?no=626&board_no=1002

Ref. Sites :

- WordPress translation plugin | Multilingual SEO on WordPress: 7 Tips To Rank In All Languages : https://translatepress.com/wordpress-multilingual-seo/
- WPML | Optimize multilingual sites using Yoast SEO and WPML : https://wpml.org/documentation/plugins-compatibility/using-wordpress-seo-with-wpml/
- WPML | Changing Language Meta Tags : https://wpml.org/forums/topic/changing-language-meta-tags/
WPML | Adding hreflang to Multilingual WordPress Sites : https://wpml.org/documentation/support/adding-hreflang-wordpress/
- SAT Communication | 다국어 페이지 검색 엔진 최적화 : hreflang(언어설정) 태그를 이용하는 방법 : https://www.seenbuy.kr/사이트에-hreflang-태그가-없습니다/
- hreflang : 더 나은 웹 | 다국어 페이지 검색 엔진 최적화 : https://www.betterweb.or.kr/blog/다국어-페이지-검색-엔진-최적화/
- codeJS | 다국어 사이트를 위한 SEO 처리. (구글 검색엔진 최적화) : http://www.codejs.co.kr/다국어-사이트를-위한-seo-처리-구글-검색엔진-최적화/

- RDF/RSS 1.0 Format : http://YourDomain.com/feed/rdf/
- RSS 0.92 Format : http://YourDomain.com/feed/rss/
- RSS 2.0 Format : http://YourDomain.com/feed/
- Atom Format : http://YourDomain.com/feed/atom/
- comments RSS 2.0 Format : http://YourDomain.com/comments/feed/


Ref. Sites :
https://codex.wordpress.org/ko:WordPress_Feeds
https://perishablepress.com/what-is-my-wordpress-feed-url/

<?php if ( ICL_LANGUAGE_CODE=='it' ) : ?>
	Your Tag
	<?php Your Code ?>
<?php endif; ?>
<?php if ( ICL_LANGUAGE_CODE=='fr' ) : ?>
	Your Tag
	<?php Your Code ?>
<?php endif; ?>

<?php if ( defined( 'ICL_LANGUAGE_CODE' ) && 'fr' == ICL_LANGUAGE_CODE ) { // If the language is French ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/fr_logo.png" class="site-logo" alt="" />
<?php } elseif( defined( 'ICL_LANGUAGE_CODE' ) && 'it' == ICL_LANGUAGE_CODE ) { // If the language is Italian ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/it_logo.png" class="site-logo" alt="" />
<?php } else { // If the language is English, the default ?>
	<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/en_logo.png" class="site-logo" alt="" />
<?php } ?>

- bavotasan.com | Displaying Different Logos with WPML (ICL_LANGUAGE_CODE) : https://bavotasan.com/2016/displaying-different-logos-wpml/
- WPML | Change logo per language (ICL_LANGUAGE_CODE) : https://wpml.org/forums/topic/change-logo-per-language/
- WPML | logo in different language (ICL_LANGUAGE_CODE) : https://wpml.org/forums/topic/logo-in-different-language/
- WPML | how to get different headers with different languages (ICL_LANGUAGE_CODE, language_attributes()) : https://wpml.org/forums/topic/how-to-get-different-headers-with-different-languages/
- WordPress Codex | Function Reference/language attributes : https://codex.wordpress.org/Function_Reference/language_attributes
- WordPress Developer Resources | Function | get_language_attributes() : https://developer.wordpress.org/reference/functions/get_language_attributes/
- WordPress Developer Resources | Function | get_bloginfo() : https://developer.wordpress.org/reference/functions/get_bloginfo/

- Language : en-US, ko-KR

Using

<link rel="canonical" href="http://YourDomain.com/">

Ref. Sites

- 검색엔진 최적화 블로그 | 표준 페이지 설정, link rel=canonical : http://www.seo-korea.com/표준-페이지-설정-link-rel-canonical/
- 네이버 웹마스터도구 | 웹마스터도구 도움말 및 가이드 : https://webmastertool.naver.com/guide/basic_markup.naver#chapter1.1
- 함께 나누는 웹개발 커뮤니티 블로그. webisfree.com | 검색엔진 최적화 방법 - Canonical 태그의 중요성과 활용 방법 : https://webisfree.com/2014-09-24/검색엔진-최적화-방법-canonical-태그의-중요성과-활용-방법

canonical :

1. (성경이) 정본에 속하는; (문학 작품이) 고전으로 여겨지는 
2. 교회법에 따른 
3. (전문 용어) (수학에서) 표준[기준]이 되는

CSSmatic | The ultimate CSS tools for web designers : https://www.cssmatic.com/

- Gradient Generator, Border Radius, Noise Texture, Box Shadow

https://pdfcandy.com/edit-pdf-meta.html

Product Filter for WooCommerce

- CodeCanyon
- Created : August 7, 2014
- Last Update : May 16, 2019
- Current Version: 7.0.4
- Sales : 12,122
- Comments : 6,203
- Regular License : $40
- Author : XforWooCommerce

URLs : XforWooCommerce.com

XforWooCommerce.com - Store | Product filter / Demos / Admin Demo / Help / Change Log

URLs : Mihajlovicnenad.com

Mihajlovicnenad.com | Product Filter for WooCommerce / Mihajlovicnenad.com | Demo / Live Preview / Documentation and Full Guide Video / Change Log / FAQ & How to?

WooCommerce Product Filter Plugin - Full Guide (Product Filter v2.3.0)

WOOF - Products Filter for WooCommerce

- Free Version : WordPress.org Plugin Page
- by realmag777
- Version: 1.2.2.1
- Last updated: 4 days ago
- Active installations: 70,000+
- WordPress Version: 4.1.0 or higher
- Tested up to: 5.2
- PHP Version: 5.4 or higher
- Download Latest - v1.2.2.1 :

WOOF - WooCommerce Products Filter

- Premium Version : CodeCanyon
- Change Log : v.2.2.2.1 / November 07, 2018
- Last Update : November 13, 2018
- Created : May 21, 2015
- Sales : 7,159
- Comments : 1,927
- Regular License : $34
- Author : realmag777

URLs :

PluginUs.Net | WOOF - Products Filter for WooCommerce / Plugin Official Site / Demo / FAQ / Video Tutorials / Codex / Sites with the plugin

Video Review : WOOF - WooCommerce Products Filter plugin - all in one

<script>
	//이 페이지에서 뒤로가기 하거나, 목록을 누를때 그리고 새로고침을 할 때 이벤트 발생
    window.onbeforeunload = function(){
        return '페이지를 벗어나시겠습니까?';
    }
</script>

ex2

<script>
	window.onbeforeunload = function() {
		jQuery('.portfolio_nav5 li:nth-child(1) > a').click();
	}
</script>

ex3

$(window).on("beforeunload", function() {
	return 'Dialog text here2.';
});

- 출처 : https://jhgan.tistory.com/27 [간둥이]

ex4

jQUery(window).bind("beforeunload", function (e){
	return "창을 닫으시겠습니까?";
});

ex5 : 페이지 이탈시 확인창 띄우기 I

<script>
	var checkUnload = true;
	jQuery(window).on("beforeunload", function() {
		if(checkUnload) return "이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다.";
	});


	//단, 글쓰기 버튼을 클릭해서 글을 저장한 후 페이지를 이동시 메시지가 뜨지않도록 checkUnload를 false로 변경 후 submit이나 페이지를 이동
	jQuery("#saveBtn").on("click", function(){
		checkUnload = false;
		jQuery("#saveForm").submit();
	});
</script>

- 출처: https://stove99.tistory.com/128 [스토브 훌로구]

ex6 : 페이지 이탈시 확인창 띄우기 II

jQuery(document).ready(function(jQuery) {
	var checkload = true;
    //글을 모두 작성하고 등록할 때 알림문구가 뜨지않도록 #submit-btn을 클릭시 checkload 변수 값을 false로 만든다. 그러면 조건문을 지나치게되어 알림이 뜨지않게된다.
	jQuery('#submit_btn').click(function () {
		checkload = false;
	});
	
	jQuery(window).on("beforeunload", function () {
		if (checkload == true) return "나가시겠습니까?";
	});
});

- 출처 : https://blog.tunalabs.io/archives/172498 [TUNALABS.IO 블로그 취미입니다]

ex7 : unload(), 페이지에서 벗어날 때

$(window).unload(function() {
	alert('Handler for .unload() called.');
});

- 출처 : https://findfun.tistory.com/329 [즐거움을 찾자 Find Fun!!]

MrColes - Peter Coles's Blog | Online CSS Unminifier

Online JavaScript Beautifier (v1.10.0)

Unminify JS, CSS and HTML Code

"The Best WordPress Sites in the World" 라는 타이틀로 WordPress.org에서 워드프레스로 제작된 대표적인 사이트를 소개하고 있다.

- WordPress Website Showcase : https://wordpress.org/showcase/
- WordPress Website Showcase | Archives : https://wordpress.org/showcase/archives/

- 워드프레스 쇼케이스에서 소개된 대표적인 웹사이트는 아래와 같다. 과거 서울시 홈페이지 처럼 워드프레스 기반으로 제작했을 뿐이지, 상당수 홈페이지는 순수 워드프레스만으로 제작되지않았을 것으로 생각된다. 또한 오래전에 업데이트된 리스트이기때문에 현재와는 다를 수 있다.

워드프레스 쇼케이스에서 소개된 대표적인 웹사이트 :

The White House (백악관)

Angry Birds (앵그리버드)

The Walt Disney Company (월트 디즈니사)

Microsoft News Center (마이크로소프트 뉴스 센터)

Mercedes-Benz (메르세데스 벤츠)

Vogue (보그)

Sony Music (소니 뮤직)

Alanis Morissette (알라니스 모리셋)

Snoop Dogg (스눕도기독)

The Rolling Stones (롤링 스톤즈)

Lollapalooza (롤라팔루자)

New York Post (뉴욕 포스트)

The New York Times Company (뉴욕 타임즈사)

Time.com (타임지)

CBS New York (CBS 뉴욕)

Chicago Bulls (시카고 불스)

Charles Barkley (찰스 버클리)

University of Melbourne (호주 멜버른 대학교)

The Mozilla Blog (모질라 블로그)

Beyoncé (비욘세)

Usain Bolt (우사인 볼트)

Sylvester Stallone (실베스터 스탤론)

LL Cool J (엘엘 쿨 제이)

Sweden’s Official Website (스웨던 공식 웹사이트)

(WordPress Website Showcase에 소개되지않은) 워드프레스로 제작된 해외 사이트 :

Justin Bieber (저스틴 비버)

워드프레스로 제작된 국내 사이트 :

현대종합상사

삼성전자 뉴스룸

Social LG전자

Ref. Sites :

- ㅅㅗㅅㅗ日記 > 워드프레스 | 워드프레스로 제작된 유명 사이트 (2018.07.01)

- WPIniciante | 10 Famous People Who Use WordPress As Their Online Platform (March 9, 2015)

- WPBeginner | 40+ Most Notable Big Name Brands that are Using WordPress (March 8th, 2019)

개발자들이 좋아하는, 싫어하는, 쓰고 싶어하는 프로그래밍 언어는?

- 노마드 코더 Nomad Coders
- 게시일: 2019. 4. 25

스택오버플로우 2019년 개발자 설문결과를 같이 분석해봅시다!
니꼴라스와 함께 하나하나 읽으며 그 의미를 알아보고, 트렌드를 살펴보자구요!

Stack Overflow Developer Survey 2019: https://insights.stackoverflow.com/survey/2019

1. 핵심 결과
2. 지역
3. 직업
4. 경력
5. 가장 인기있는 프로그래밍 언어는?
6. 가장 인기있는 웹 프레임워크는?
7. 개발자들이 가장 좋아하는. 싫어하는. 쓰고 싶어하는 프로그래밍 언어는?
8. 개발자들이 가장 좋아하는. 싫어하는. 쓰고 싶어하는 웹 프레임워크는?
9. 가장 인기있는 개발 환경은?
10. 연봉

Popup Maker – Popup Forms, Optins & More

- by WP Popup Maker
- Version: 1.8.5
- Last updated: 2 weeks ago
- Active installations: 300,000+
- WordPress Version: 4.1 or higher
- Tested up to: 5.2
- PHP Version: 5.2.17 or higher
- WordPress.org Plugin Page : https://wordpress.org/plugins/popup-maker/
- Plugin's Offical Site : https://wppopupmaker.com/
- Blog / GitHub / Twitter / Support
- Download Latest - 1.8.5 : 

- Screenshots :

- Review page : https://www.thewordcracker.com/basic/기능이-많고-유연한-워드프레스-팝업-플러그인-popup-maker/ (2018.03.13)

Popup Builder – Responsive WordPress Pop up – Subscription & Newsletter

- by Sygnoos
- Version: 3.2
- Last updated: 3 days ago
- Active installations: 100,000+
- WordPress Version: 3.8 or highner
- Tested up to: 5.2
- PHP Version: 5.3.3 or higher
- WordPress.org Plugin Page : https://wordpress.org/plugins/popup-builder/
- Plugin's Offical Site : https://popup-builder.com/
- Download Latest - 3.2 : 

- Screenshots :

- Review page : https://www.thewordcracker.com/basic/popup-builder-워드프레스-팝업-플러그인/ (2018.02.25)

Popups – WordPress Popup

- by timersys
- Version: 1.9.3.7
- Last updated: 2 days ago
- Active installations: 60,000+
- WordPress Version: 3.6 or higher Tested up to: 5.1.1
- PHP Version: 5.3 or higher
- Language: English (US)
- WordPress.org Plugin Page : https://wordpress.org/plugins/popups/
- Plugin's Offical Site : Popups - Timersys : https://timersys.com/free-plugins/social-popup/
- Download Latest - 1.9.3.7 : 

- Screenshots :

- Review page1 : https://pluginarchive.com/wordpress/popups

- Review page2 : https://www.thewordcracker.com/basic/wordpress-popup-plugin-for-multiple-popups/ (2016.05.15)

Popup Plugin For WordPress - ConvertPlus

- by BrainstormForce
- 13,768 Sales
- 1,732 Comments
- Regular License : $24 (from codecanyon.net)

- CodeCanyon.net Plugin Page : https://codecanyon.net/item/popup-plugin-for-wordpress-convertplug/14058953
- Plugin's Offical Site : https://www.convertplug.com/plus/

- Last Update : 1 March 19
- Created : 14 December 15

- Screenshots :

- Review page : https://www.thewordcracker.com/basic/convertplug-wordpress-popups-plugin/ (2016.08.02)

ITRO Popup Plugin

- by ITRO Team
- Version: 5.0.2
- Last updated: 2 years ago
- Active installations: 20,000+
- WordPress Version: 3.0.1 or higher
- Tested up to: 4.7.13
- WordPress.org Plugin Page : https://wordpress.org/plugins/itro-popup/

- Plugin's Offical Site : https://www.itroteam.com/wordpress-popup-plugin-free/

- Download Latest - 5.0.2 : 

- Review page : https://www.thewordcracker.com/scribblings/wordpress-popup-plugin/ (2016.05.02)

Ref. Sites

- CMS FACTORY > 워드프레스 강좌 | 팝업(Popup) 플러그인 세가지 (Created on 2014-03-11 13:35 | Updated on 2018-10-04 18:39) 
Hustle – Pop-Ups, Slide-ins and Email Opt-ins by WPMU DEV : https://wordpress.org/plugins/wordpress-popup/
WordPress Popup – Optin Revolution by Optin Revolution : https://wordpress.org/plugins/optin-revolution/
ITRO Popup Plugin By ITRO Team : https://wordpress.org/plugins/itro-popup/

- aThemes | 10 Best WordPress Popup Plugins 2019 (February 6, 2019)

ConvertPlus / Ninja Popups / Bloom / OptinMonster / Elementor Pro / Layered Popups / Icegram / Popup Maker / WP Subscribe Pro / PopUp Domination

- MonsterPost Blog | 10+ Best WordPress Popup Plugins Approved by the Official WP Community (3 months ago)

JETPOPUP / Popup Builder from Elementor / HubSpot / Beeketing for WooCommerce WordPress Popup Plugin / Cherry PopUps / OptinMonster WordPress Popup Plugin / Popup Maker WordPress Plugin / Hustle WordPress Popup Plugin / Popup Builder WordPress Plugin / Popups WordPress Plugin / Icegram WordPress Popup Plugin / MailMunch WordPress Popup Plugin / ITRO WordPress Popup Plugin / WordPress Popup Plugin by Supsystic / Modal Window WordPress Plugin / MailOptin WordPress Popup Plugin

- Colorlib | Top 15 Popup Plugins for WordPress To Get More Subscribers And Improve Conversion Rates 2019 (April 3, 2019)

Popup Builder / PopUp by Supsystic / Popup Maker / PopupAlly / MailOptin / Yeloni Exit Popup / Uji Popup / OptinMonster / WP Post Popup / Popups / Popup Maker / Icegram / Alligator Popup / Simple Popup Plugin / OptiMonk

css

.anchor_point_topmargin1 {display: block; position: relative; top: -150px; visibility: hidden;}
.anchor_point_topmargin2 {display: block; position: relative; top: -50px; visibility: hidden;}

jQuery

$('.anchor_point').addClass('anchor_point_topmargin1');
$(window).scroll(function () {
    var scrollValue = $(document).scrollTop();
    if (scrollValue == '0') {
        //console.log(scrollValue);
        $('.anchor_point').addClass('anchor_point_topmargin1');
        $('.anchor_point').removeClass('anchor_point_topmargin2');
    } else {
        $('.anchor_point').removeClass('anchor_point_topmargin1');
        $('.anchor_point').addClass('anchor_point_topmargin2');
    };
});

References :

- [jQuery] 현재 스크롤값 가져오기(scroll)

- [css] anchor offset (for fixed header) : 10 solutions

문서 로딩시 스크롤값 얻기

$(document).scrollTop();

실시간(현재) 스크롤값 얻기 (현재 스크롤값이 로깅됨)

$(window).scroll(function () {
	var scrollValue = $(document).scrollTop();
	console.log(scrollValue);
});

- 출처: euntori.blog | [제이쿼리] 현재 스크롤값 가져오기(scroll) (2016.02.05)

References :

- 즐거움을 찾자 Find Fun!! | scroll(), 스크롤 이벤트 (2012.03.06)

- 원영's | jQeury 스크롤 내리다가 특정 영역(부분) 이벤트 발생시키기 (2017.04.27)

PROBLEM

Offsetting an html anchor to adjust for fixed header?

SOLUTION 1

- You could use CSS without any javascript.
- Give your anchor a class:

<a class="anchor" id="top"></a>

You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making it a block element by relatively positioning it. -250px will position the anchor upto 250px

a.anchor {display: block; position: relative; top: -250px; visibility: hidden;}

SOLUTION 2

This is another solution using HTML code for offseting an html anchor:

<a name="mywikianchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

This doesn’t create any gap in the content and anchor links works.

SOLUTION 3

a[name]  
{ 
  padding-top: 40px; 
  margin-top: -40px; 
  display: inline-block; /* required for webkit browsers */ 
} 

- In CSS, optionally you may want to add the following if the target is still off the screen:

vertical-align: top; 

SOLUTION 4

*[id]:before {display: block; content: " "; margin-top: -75px; height: 75px; visibility: hidden;}

SOLUTION 5

<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->

$(function() 
{
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) 
{
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) 
{
        $('html,body').animate(
{
          scrollTop: target.offset().top - 125 //offsets for fixed header
        
}
, 1000);return false;     
 }
 } 
 })

SOLUTION 6

a[id]:before {content:""; display:block; height:50px; margin:-30px 0 0;}

That will append a pseudo-element before every a-tag with an id. Adjust values to match the height of your header.

SOLUTION 7

- For modern browsers, just add the CSS3 :target selector to the page. This will apply to all the anchors automatically.

:target {display: block; position: relative; top: -100px; visibility: hidden;}

SOLUTION 8

- Adjust the height and the negative margin to the offset you need…

:target:before {content: ""; display: inline-block; height: 180px; margin: -180px 0 0;}

SOLUTION 9

- You can include a smooth-scroll effect to the anchor, while making it stop at -60px above the anchor, fitting nicely underneath the fixed bootstrap navigation bar (requires jQuery):

$(".dropdown-menu a[href^='#']").on('click', function(e) 
{
   // prevent default anchor click behavior
   e.preventDefault();

   // animate
   $('html, body').animate(
{
       scrollTop: $(this.hash).offset().top - 60
 }, 300, function()
{
     });
});

SOLUTION 10

- We added 40px-height .wiki element holding the anchor before each h1 elements.

<div class="wiki" id="gherkin"></div>
<div class="page-header">
  <h1>wikitechy</h1>
</div>

.wiki {height: 40px;}

- Sorces : Wikitechy | Offsetting an html anchor to adjust for fixed header (March 23, 2017)