WordPress에서 oEmbed 최대 너비를 설정하는 방법(4가지 쉬운 방법)

This topic has 0개 답변, 1명 참여, and was last updated 2021-10-31/19:24 by 블로거.

블로거
운영자

2021-10-31 19:24
WordPress에서 oEmbeds의 너비를 제한하시겠습니까?

WordPress는 YouTube 동영상, 트윗 또는 Facebook 게시물과 같은 타사 콘텐츠를 자동으로 포함합니다. 그러나 때때로 임베드가 너무 넓어져 페이지 레이아웃이 엉망이 될 수 있습니다.

이 기사에서는 WordPress에서 oEmbed max-width를 설정하여 사이트 레이아웃을 더 잘 제어할 수 있도록 하는 방법을 보여줍니다.

WordPress에서 OEmbed 최대 너비를 수정하는 이유는 무엇입니까?

WordPress를 사용하면 oEmbed라는 기술을 사용하여 선택한 타사 웹사이트의 콘텐츠를 게시물과 페이지에 자동으로 포함할 수 있습니다.

이렇게 하면 쉽게 YouTube 동영상 삽입, 페이스북 게시물, 트윗 및 웹사이트의 기타 여러 유형의 콘텐츠. 이 콘텐츠는 귀하의 워드프레스 웹사이트. 대신 이러한 타사 사이트에서 직접 표시됩니다.

WordPress는 포함된 콘텐츠의 너비를 웹사이트의 콘텐츠 또는 사이드바 영역에 맞게 자동으로 조정하는 데 매우 적합합니다.

그러나 때때로 이러한 포함된 콘텐츠가 너무 넓고 아래 예와 같이 웹사이트의 콘텐츠 영역과 겹칠 수 있습니다.

이 문제를 해결하려면 WordPress에 타사 삽입에 대해 최대 너비 제한을 사용하도록 명시적으로 알려야 합니다. 불행히도 WordPress 설정에는 그렇게 할 수 있는 옵션이 없습니다.

즉, 아무 것도 손상시키지 않고 WordPress에서 oEmbed 최대 너비를 쉽게 설정하는 방법을 살펴보겠습니다.

4가지 다른 방법을 다루며 필요에 가장 적합한 방법을 선택할 수 있습니다.
방법 1. WordPress에서 Embed Shortcode 사용

이 방법은 더 쉽고 WordPress에서 비디오 임베드의 최대 너비를 설정하는 데 정말 잘 작동합니다.

URL을 붙여넣거나 YouTube 블록을 사용하는 대신 짧은 코드 블록. 그 안에 포함 단축 코드를 사용하고 너비 및 높이 매개 변수를 포함해야 합니다.

[embed width="900" height="600"]https://youtu.be/6LwWumPeues[/embed]

너비와 높이 값을 원하는 대로 자유롭게 변경하고 내장 URL을 자신의 내장으로 바꾸십시오.

이제 게시물 또는 페이지를 미리 보고 임베드가 작동하는 것을 볼 수 있습니다.

포함 단축 코드와 너비 및 높이 매개 변수는 모든 oEmbed 공급자에서 작동하지 않습니다. 예를 들어, 높이와 너비를 설정하는 데 사용할 수 없습니다. 워드프레스에 Giphy 임베딩.

이 경우 아래에 언급된 대체 방법 중 하나를 시도할 수 있습니다.

방법 2. WordPress에서 블록 포함 사용

NS 기본 워드프레스 편집기 다양한 oEmbed 서비스 제공업체를 위한 여러 내장 블록과 함께 제공됩니다. 이를 사용하여 게시물 및 페이지의 다른 영역에 콘텐츠를 포함할 수 있습니다.

이러한 블록 중 일부를 사용하면 포함 정렬을 변경하고 콘텐츠 너비를 너비 또는 전체 너비로 설정할 수도 있습니다.

이 옵션을 사용하여 임베드의 최대 너비 문제가 해결되는지 확인할 수 있습니다.

방법 3. CSS를 사용하여 WordPress의 Embed에 대한 최대 너비 설정

기본적으로 WordPress는 자동으로 CSS 클래스 게시물 및 페이지의 다른 영역으로 이동합니다.

또한 블록을 포함하기 위해 여러 CSS 클래스를 추가합니다. 이러한 CSS 클래스를 사용하여 WordPress 웹사이트에 포함할 수 있는 최대 너비를 설정할 수 있습니다.

대상으로 삼아야 하는 CSS 클래스를 찾으려면 게시물이나 페이지에 콘텐츠를 포함하고 브라우저에서 미리보기만 하면 됩니다. 포함된 콘텐츠를 마우스 오른쪽 버튼으로 클릭한 다음 검사 도구를 선택합니다.

포함된 요소에 추가된 모든 CSS 클래스를 볼 수 있습니다. 이러한 클래스를 사용하여 이러한 유형의 포함에 대한 최대 너비를 설정할 수 있습니다.

예를 들어 모든 포함에 대해 최대 너비를 설정하려는 경우 다음을 사용할 수 있습니다. 사용자 정의 CSS.
```

.wp-block-embed {
    max-width: 900px!important;
}
```
다음을 사용하여 특정 oEmbed 제공자를 타겟팅할 수도 있습니다. .wp-block-embed-providername 수업. 예를 들어 Pinterest 임베드에 대해서만 최대 너비를 설정하려는 경우 다음 사용자 정의 CSS를 사용할 수 있습니다.
```

.wp-block-embed-pinterest {
    max-width: 900px!important;
}
```
방법 4. WordPress 필터를 사용하여 oEmbed 최대 너비 설정

이 마지막 방법을 사용하려면 WordPress 웹사이트에 사용자 정의 코드를 추가해야 합니다. 이전에 이 작업을 수행하지 않은 경우 에 대한 가이드를 살펴보세요. WordPress에서 사용자 정의 코드 조각을 쉽게 추가하는 방법.

이 방법의 경우 oEmbeds의 기본 너비를 설정하기 위해 자체 코드를 WordPress에 추가합니다. 테마의 functions.php 파일에 다음 코드를 추가하거나 코드 조각 플러그인.
```

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
 
function wpbeginner_embed_defaults() {
    return array(
        'width'  => 400, 
        'height' => 280
    );
}
```
자신의 요구 사항에 맞게 높이 및 너비 속성을 조정하는 것을 잊지 마십시오.

이 방법의 문제점은 포함된 콘텐츠에 ‘width’가 정의되어 있지 않은 경우에만 너비 속성을 적용한다는 것입니다. 포함 코드에 너비가 이미 포함되어 있으면 이 방법이 작동하지 않을 수 있습니다.

보너스 팁

소셜 미디어 플랫폼의 콘텐츠를 WordPress 웹사이트에 정기적으로 포함하는 경우 사용을 시작해야 합니다. 스매시 풍선.

그것은 WordPress를 위한 최고의 소셜 미디어 플러그인 쉽게 삽입할 수 있습니다. 맞춤형 소셜 미디어 피드 워드프레스에서.

YouTube, Twitter 등과 같은 인기 있는 소셜 미디어 포함을 지원합니다. 또한 WordPress에서 지원하지 않는 Facebook 및 Instagram 콘텐츠를 포함할 수 있습니다.

더 중요한 것은 모든 소셜 미디어 피드가 모바일 반응형이며 모든 WordPress 테마에서 작동한다는 것입니다.

이 기사가 WordPress에서 oEmbed 최대 너비를 설정하는 방법을 배우는 데 도움이 되었기를 바랍니다. 당신은 또한 우리의 완전한 소셜 미디어 치트 시트 또는 우리의 전문가 비교 중소기업을 위한 최고의 라이브 채팅 소프트웨어.

이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서용. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.
Source link

신고하기
Reply