웹퍼블리셔의 팁 창고

is_user_logged_in()

 - Checks if the current visitor is a logged in user.

- 반환값 : (bool) True if user is logged in, false if not logged in.

EX 1

<?php

if ( is_user_logged_in() ) {

    echo 'Welcome, registered user!';

} else {

    echo 'Welcome, visitor!';

}

?>

EX 2

function example_function()

{

    if ( is_user_logged_in() ) 

    {

        // code

    }

}

add_action('init', 'example_function');

EX 3

<?php if ( is_user_logged_in() ) { ?>

    <a href="<?php echo wp_logout_url(); ?>">Logout</a>

<?php } else { ?>

    <a href="/wp-login.php" title="Members Area Login" rel="home">Members Area</a>

<?php } ?>


EX 4

if(!is_user_logged_in()) {

    echo '123';

}

EX 5

<?php

if ( !is_user_logged_in() ) {

  echo '<style>Your Code</style>';

}

?>

EX 6

<?php

if ( is_user_logged_in() ) {

  echo '<script type="text/javascript">Your Code</script>';

} else {

    echo '<script type="text/javascript">Your Code</script>';

}

?>

EX 7

<?php 

if ( !is_user_logged_in() ): ?>

<script> 

jQuery("#selector").removeAttr("href").css({

'backgroundColor' : '#ccc',

'color' : '#000'

});

</script>

<?php else: ?>

<script>

jQuery("#selector").removeAttr("href").css({

'backgroundColor' : '#ccc',

'cursor' : 'default'

});

</script>

<?php endif ?>

https://developer.wordpress.org/reference/functions/is_user_logged_in/
http://wp.pasabro.com/워드프레스-액션-훅-action-hook-개념/
https://www.thewordcracker.com/intermediate/워드프레스-액션과-필터의-차이점/
https://www.thewordcracker.com/intermediate/understanding-add_filter-in-wordpress/ : 워드프레스 add_filter 이해

wp_head

EX1

function hook_css() {

    ?>

        <style>

            .wp_head_example {

                background-color : #f1f1f1;

            }

        </style>

    <?php

}

add_action('wp_head', 'hook_css');

EX2

function hook_javascript() {

    ?>

        <script>

            alert('Page is loading...');

        </script>

    <?php

}

add_action('wp_head', 'hook_javascript');

EX3

add_action('wp_head', 'add_css_head');

function add_css_head() {

   if ( is_user_logged_in() ) {

   ?>

      <style>

          .selector {display:block;}

      </style>

   <?php

   } else {

   ?>

      <style>

          .selector {display:none;}

      </style>

   <?php

   }

}

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head

Korean Sites

WordPress 한국 : https://ko.wordpress.org/

한국워드프레스사용자모임 : https://kopress.kr/

WPBOX.KR : https://wpbox.kr/

CMS FACTORY : https://www.cmsfactory.net

Make BCT : 워드프레스와 블로그코디 BC TOWN^TM 사용자를 위한 포럼 커뮤니티 : http://makebct.net/

WordPress 가이드 : 워드프레스를 여행하는 히치하이커를 위한 안내서 : https://wpguide.usefulparadigm.com/

코딩의 시작, TCP School : http://tcpschool.com/

쌈쳐넷 : http://ssamture.net/

Naver Cafe - All in Wordpress : https://cafe.naver.com/allinwordpress/

HwangC : http://hwangc.com/

WordPress 가이드 | 워드프레스를 여행하는 히치하이커를 위한 안내서 : https://wpguide.usefulparadigm.com/

WordPress 가이드 - 워드프레스를 여행하는 히치하이커를 위한 안내서 > 플러그인 디렉터리 : https://wpguide.usefulparadigm.com/plugins

ㅅㅗㅅㅗ日記 : https://avada.tistory.com/

English Sites

WordPress Development | Stack Exchange : https://wordpress.stackexchange.com/
ThemeIsle Blog : WordPress Tutorials and Reviews for Beginners and Advanced : https://themeisle.com/blog/
WPMU DEV : WordPress web development toolkit : https://premium.wpmudev.org

WPBeginner - Biginner's Guide for Wordpress : https://www.wpbeginner.com/

PluginArchive | Wordpress Plugins (Analyze changes between open-source plugin releases) : https://pluginarchive.com/wordpress

WordPress related Korea Stores

단비스토어 : https://danbistore.com/

코스모스팜 : https://www.cosmosfarm.com/

코드엠샵 : https://www.codemshop.com/
보부상 테마 (BBS e-Theme) : http://www.bbsetheme.com/

홈토리(망보드) : https://www.mangboard.com/store/

::selection {background:#dd8500; color:#FFF; text-shadow:none;}

::-moz-selection {background:#dd8500; color:#FFF; text-shadow:none;}

::-webkit-selection {background:#dd8500; color:#FFF; text-shadow:none;} 

백그라운드 컬러값 수정하면 됩니다.

$('.selector').on('keyup', function() {

if($(this).val().length > 50) {

alert("글자수는 50자로 이내로 제한됩니다.");

$(this).val($(this).val().substring(0, 50));

}

});

출처 : http://deuxism.tistory.com/12

Contact Form 7 - reCAPTCHA 페이지 : https://contactform7.com/recaptcha/

예시 : [recaptcha size:normal]

WordPress RSS 피드에 추천 이미지를 표시하는 방법?
https://wpism.com/image-wordpress-rss-feed/

FEEDZY RSS Feeds Lite
https://wordpress.org/plugins/feedzy-rss-feeds/

5 Best Free & Premium WordPress RSS Feed Plugins for 2018
https://themegrill.com/blog/wordpress-rss-feed-plugins/

워드프레스 Wordpress 가져오기 기능으로 다른 시스템 글이나 댓글 가져오기
http://mainia.tistory.com/3313

워드프레스 블로그에 외부 RSS 피드 표시하기
https://www.thewordcracker.com/intermediate/display-external-rss-feed-in-wordpress-blog/

[워드프레스] RSS 위젯을 사용하여 다른 워드프레스 사이트의 최신글 목록 표시하기
https://www.thewordcracker.com/basic/display-recent-posts-list-of-other-wordpress-blog-using-rss-widget/

WordPress Feeds
https://codex.wordpress.org/WordPress_Feeds

5 Best WordPress Autoblog Plugins 2018
https://www.softwarefindr.com/best/autoblog-wordpress/

8 Best Free WordPress RSS Feed Plugins 2018 (real-time updates)
https://www.softwarefindr.com/best/wordpress-rss-feed-plugins/

5 Best RSS Feed Plugins for WordPress
https://www.codeinwp.com/blog/best-wordpress-rss-feed-plugins/

9 Best WordPress RSS Feed Plugins 2018
https://www.wpblog.com/best-wordpress-rss-plugins/

http://superbee.co.kr/category/news/feed/

방법1) 텍스트를 지우기 : clone()을 이용하여 복사하고, 내용 삭제(empty) 이후 append 처리

var clone1 = jQuery('.product-share span.share-title').clone();
var clone2 = jQuery('.product-share ul.menu-social-icons').clone();
jQuery('.product-share').empty();
jQuery('.product-share').append(clone1);
jQuery('.product-share').append(clone2);

결과 :

방법2) 텍스트를 변경하기 : children()을 이용하여 변수에 요소 저장 후 텍스트 변경, 이후 append 처리

<div>Click
	<span class="ico rightArr"> ></span>
</div>

var cloneEle = $('div').children();
$('div').text('No Click');
$('div').append(cloneEle);

결과 :

<div>No Click
	<span class="ico rightArr"> ></span>
</div>

※ 예제2 출처 : Webisfree.com - [제이쿼리] text() 또는 html() 사용시 텍스트만 지우고 태그는 남기는 방법

1. 다운그레이드하려는 코어 파일 다운로드 : https://ko.wordpress.org/releases/

2. wp-content 폴더, wp-config-sample.php를 제외한 파일을 FTP를 통해 업로드(덮어쓰기)

3. 다운그레이드 끝

CSSmatic - Gradient Generator, Border Radius, Noise Texture, Box Shadow
https://www.cssmatic.com/

Gradient Generator

Border Radius

Noise Texture

Box Shadow

특정 객체(Object)가 특정 클래스 속성 값을 가지고 있는지 알아내는 다양한 방법

<div id="div_test" class="milk apple house">
...
</div>

1. hasClass 함수

if($("#div_test").hasClass("apple") === true) {

// 속성값 존재시 구문

}

if( jQuery('body').hasClass('page-id-552') == true ) {

jQuery('input.pf_search').focus();

};

→ ID가 div_test인 객체가 class apple 을 가지고 있는지 체크. hasClass 는 해당 객체가 파라메터로 들어온 속성값을 가지고 있는 경우 true를 반환.

2. is 함수

if($("#div_test").is(".apple") === true) {

// 속성값 존재시 구문

}

→ is 함수를 통해 특정 class를 포함하고 있는지 체크. is 함수에는 class 외에 id, name 등도 사용 가능하므로 반드시 클래스 이름 앞에 . 을 찍어서 클래스 속성임을 명시.

3. length 속성

if($("#div_test.apple").length) {

// 속성값 존재시 구문

}

→ apple 클래스 속성 존재시 length 길이는 1이 되며, 미존재시 0이 됨. length 값이 있는지 여부를 체크하여 class 속성이 존재하는지 확인할 수 있음.

if ($("#id").length > 0) {

//do something

};

→ length 특성 사용시 존재하는 객체의 갯수를 반환하고 존재하지 않으면 0를 반환, 즉 length가 1 이상일 경우 객체가 존재함을, 0일 경우 존재하지 않음을 의미

가독성, 성능(속도), 서비스 부하 등을 고려, hasClass를 사용하는 것이 좋음

※ 출처 : 이러쿵저러쿵 - [JQuery] Object의 특정 클래스(Class) 포함 여부를 확인하는 다양한 방법. : http://ooz.co.kr/245

코드를 작성할 때 작성한 텍스트가 있는 그대로 출력되기를 원할 때

<code> 태그는 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할 때 유용

<samp> 태그는 컴퓨터 프로그램에서 샘플을 출력할 때

<kbd> 태그는 키보드 입력을 지정할 때

<var> 태그는 변수를 입력할 때 유용

<pre> 역시 미리 작성된 텍스트를 있는 그대로 표시해주며 블록 형태로 사용

즉, 여러 줄의 코드를 그대로 출력하고자 할 때 위의 code, samp, kbd, var 등을 둘러싼 형태로 사용

■ code 예제 :

<pre><code>function Panel(element, canClose, closeHandler) {

  this.element = element;

  this.canClose = canClose;

  this.closeHandler = function () { if (closeHandler) closeHandler() };

}</code></pre>

→ 결과

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

■ samp 예제 :

<p>컴퓨터를 하던 중 <samp>Oops…the system encountered a problem (#707)</samp>라는 에러 메시지가 떴다</p>

→ 결과

컴퓨터를 하던 중 Oops…the system encountered a problem (#707)라는 에러 메시지가 떴다

■ kbd 예제 :

취소하려면 Ctrl+z를 입력하시오

→ 결과

취소하려면 Ctrl+z를 입력하시오

■ var 예제 :

<p><var>n</var>의 수만큼 곱하시오</p>

→ 결과

n의 수만큼 곱하시오

■ pre 예제 :

<pre>                maxling

it is with a          heart

               heavy

that i admit loss of a feline

        so           loved

a friend lost to the

        unknown

                                (night)

~cdr 11dec07</pre>  

→ 결과

                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07

※ 출처 : 지구별 안내서 - [html] pre, code 태그 차이 : http://aboooks.tistory.com/283

<div id="example">

<a href="images/Grass.jpg"><img src="images/Grass.jpg" alt="Grass" /></a>

<a href="images/Leaf.jpg"><img src="images/Leaf.jpg" alt="Leaf" /></a>

<a href="images/Spring.jpg"><img src="images/Spring.jpg" alt="Spring" /></a>

<a href="images/Water.jpg"><img src="images/Water.jpg" alt="Water" /></a>

</div>

$("#example").after("<p id='alts'>");     //id=example 뒤에 추가

$("img").each(function () {     //각 img의 속성을 위 alts에 추가

$("#alts").append($(this).attr("alt") + " ");

});

$("a").attr("title", "title_exam");

$("a").attr("target", "_blank");
$("a").removeAttr("href");
$("img").attr({ src: "img/test.jpg", title: "Test Photo"});   //다중 속성 부여

$('.header-search form input.form-control').attr('placeholder', '상품명을 입력하세요');

※ 출처: 남다른 캐나다 - [jQuery] 제이쿼리 attr() 이해하기 : http://farcanada.tistory.com/entry/jQuery-제이쿼리-attr-이해하기

wrap() : 선택한 요소를 원하는 태그로 감싼다

문법 :

$('p').wrap('<div></div>');
$('p').wrap('<div id="ab" class="cd"></div>');
$('p').wrap('<div><strong></strong></div>');

예제 :

<div class="container">

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$( ".inner" ).wrap( "<div class='new'></div>" );

<div class="container">

<div class="new">

<div class="inner">Hello</div>

</div>

<div class="new">

<div class="inner">Goodbye</div>

</div>

</div>

==========================================================

.wrapAll() : 선택한 요소 모두를 새로운 태그로 감싼다

문법 :

$('p').wrap( '<div></div>' );

$('p').wrap( '<div id="ab" class="cd"></div>');

$('p').wrap( '<div><strong></strong></div>');

예제 :

<p>Lorem ipsum dolor.</p>

<h3>Lorem ipsum dolor.</h3>

<p>Lorem ipsum dolor.</p>

$( 'p' ).wrapAll( '<div></div>' );

<div>

<p>Lorem ipsum dolor.</p>

<p>Lorem ipsum dolor.</p>

</div>

<h3>Lorem ipsum dolor.</h3>

==========================================================

.unwrap() : 선택한 요소의 상위 태그를 제거
.contents()를 이용하여 자식 요소를 그대로 둔 채 현재 태그를 제거할 수 있습니다.

예제 :

<div><h1>Hello World!</h1></div>

$('h1').unwrap();

실행결과 : <h1>Hello World!</h1>

$('h1').contents().unwrap();

실행결과 : <div>Hello World!</div>

==========================================================

wrapInner()

예제 :

<div class="container">

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$(".inner").wrapInner("<div class='new'></div>");

<div class="container">

<div class="inner">

<div class="new">Hello</div>

</div>

<div class="inner">

<div class="new">Goodbye</div>

</div>

</div>

※ 출처 및 참고
linuxism :: jquery - 태그 감싸기 wrap(), wrapAll(), wrapInner() : http://linuxism.tistory.com/1496
CODING FACTORY - jQuery / Method / .wrap() : https://www.codingfactory.net/10214
CODING FACTORY - jQuery / Method / .unwrap() : https://www.codingfactory.net/10216
즐거움을 찾자 Find Fun!! - jQuery API 정복 - 요소 감싸기, wrap() : http://findfun.tistory.com/266?category=383258
jQuery API Documentation :: .wrap() : http://api.jquery.com/wrap/
jQuery API Documentation :: .wrapInner() : http://api.jquery.com/wrapinner/

.css()메소드로는 !important 는 적용이 안됩니다.
.attr('style','속성 !important')을 이용

[출처] jquery의 css !important 적용 : http://front8062.tistory.com/28

CSS 코드에 -webkit-, -ms-등 벤더 프리픽스를 추가하거나, 줄바꿈을 minify해주는 사이트입니다.

Pleeease·Process CSS with ease : http://pleeease.io/play/

- preprocess CSS (experimental) - adds prefixes, based on Autoprefixer - provides fallbacks for rem unit, CSS3 pseudo-elements notation - adds opacity filter for IE8 - converts CSS shorthand filters to SVG equivalent - packs same media-query in one @media rule - inlines @import styles - minifies the result - generates sourcemaps from pre- to postprocessors

출처 : XpressEngine | 웹마스터 팁 : https://www.xpressengine.com/tip/22900493

사용하고자하는 CSS 속성의 현재 웹브라우져별 지원 현황을 확인할 수 있다.

https://caniuse.com/

아래는 box-shadow의 예

cursive : 필기체인
generic : 포괄적인, 총칭[통칭]의, (상품, 특히 약품이) 회사 이름이 붙지 않은, 일반 명칭으로 판매되는

font-family: family-name 또는 generic-family

family-name : 글꼴 이름. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싼다. 글꼴을 여러 개 설정할 때는 쉼표로 구분.
generic-family : 글꼴 유형

serif : 삐침 있는 명조계열의 글꼴
sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴

monospace : 글자 폭과 간격이 일정한 글꼴

cursive : 손으로 쓴 것 같은 필기계열의 글꼴

fantasy : 화려한 글꼴

영어와 한글 글꼴을 다르게 하기

글꼴을 여러 개 설정했을 때, 첫번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용합니다.
따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현됩니다.
예를 들어 다음과 같이 하면
font-family: Georgia, "맑은 고딕", serif;
한글은 맑은 고딕, 나머지는 Georgia로 표현됩니다.

※ 출처 : CMS FACTORY | CSS 강좌 | Property > font-family : https://www.cmsfactory.net/css-reference-font-family

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용

문법

선택자:의사클래스이름 {속성: 속성값;}

선택자.클래스이름:의사클래스이름 {속성: 속성값;}
선택자#아이디이름:의사클래스이름 {속성: 속성값;}

1. 동적 의사 클래스(dynamic pseudo-classes)

:link : 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택 (기본 상태)
:visited : 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택
:hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택
:active : 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택
:focus : 초점이 맞춰진 input 요소를 모두 선택

2. 상태 의사 클래스(UI element states pseudo-classes)

:checked : 체크된(checked) 상태의 input 요소를 모두 선택
:enabled : 사용할 수 있는 input 요소를 모두 선택
:disabled : 사용할 수 없는 input 요소를 모두 선택

3. 구조 의사 클래스(structural pseudo-classes)

:first-child : 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택
:last-child : 모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택.
:nth-child : 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
:nth-last-child : 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택.
:first-of-type : 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택

:last-of-type : 모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택

:nth-of-type : 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택

:nth-last-of-type : 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택

:only-child : 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택

:only-of-type : 자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택

:empty : 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택

:root : 문서의 root 요소를 선택

4. 기타 의사 클래스

:not(선택자) : 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용
:lang(언어) : 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용

:target : 현재 활성화된 target 요소를 모두 선택

:in-range : 특정 범위 내의 값을 가지는 input 요소를 모두 선택

:out-of-range : 특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택

:read-only : readonly 속성을 가지는 input 요소를 모두 선택

:read-write : readonly 속성을 가지지 않는 input 요소를 모두 선택

:required : required 속성을 가지는 input 요소를 모두 선택

:optional : required 속성을 가지지 않는 input 요소를 모두 선택

:valid : 유효한 값을 가지는 input 요소를 모두 선택

:invalid : 유효하지 않은 값을 가지는 input 요소를 모두 선택

출처 : 코딩의 시작, TCP School : http://tcpschool.com/css/css_selector_pseudoClass

pointer-events : HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.

.hidden {opacity: 0;pointer-events:none;}

pointer-events 속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있다. 아래의 3개의 속성값은 HTML 요소들에서 사용 가능하다.

none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.

auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.

inherit : 부모 요소로부터 pointer-events 값을 상속

※ IE9와 IE10에서 pointer-events가 작동하지 않기때문에 visibility: hidden 값과 함께 사용하는 것을 고려하도록 하자.

출처: http://webdir.tistory.com/506 [WEBDIR]